/* Text Styles */
/*  Could not refactor colors as CSS variables for WebVTT ::cue pseudo-selector limitation */
/* TODO: Need to figure out the fonts */
@font-face {
  font-family: 'Druk-Heavy-Desktop';
  src:
    url('./fonts/Druk-Heavy-Desktop.woff2') format('woff2'),
    url('./fonts/Druk-Heavy-Desktop.woff') format('woff');
}
@font-face {
  font-family: 'Druk-Bold-Desktop';
  src: url('./fonts/Druk-Bold-Desktop.otf') format('opentype');
}
video.font-initial::cue {
  font-family: initial;
}
video.font-playbill::cue {
  font-family: 'Playbill', sans-serif;
}
video.font-newsprint::cue {
  font-family: 'Newsprint', serif;
}
video.font-computer::cue {
  font-family: 'Computer', sans-serif;
}
video.font-modern::cue {
  font-family: 'Modern', sans-serif;
}
video.font-casual::cue {
  font-family: 'Casual', sans-serif;
}
video.font-script::cue {
  font-family: 'Script', serif;
}
video.font-capitals::cue {
  font-family: 'Capitals', sans-serif;
}

/* Text Sizes */
/* Had to figure out what the initial sizes were and applying `initial` gave us smaller fonts */
video.text-initial::cue {
  font-size: 36px;
}
video.text-sm::cue {
  font-size: 0.5em;
}
video.text-md::cue {
  font-size: 0.875em;
}
video.text-lg::cue {
  font-size: 1em;
}

/* Text Color and Opacity Combinations */
/* This is assuming that initial color is white as opacity on text cannot be set in combination with color initial */
video.text-color-initial-opacity-100::cue {
  color: rgba(255, 255, 255, 1); /* color-initial with full opacity */
}
video.text-color-initial-opacity-50::cue {
  color: rgba(255, 255, 255, 0.5); /* color-initial with 50% opacity */
}
video.text-color-initial-opacity-0::cue {
  color: rgba(255, 255, 255, 0); /* color-initial with 0% opacity */
}

video.text-black-opacity-100::cue {
  color: rgba(0, 0, 0, 1); /* black with full opacity */
}
video.text-black-opacity-50::cue {
  color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}
video.text-black-opacity-0::cue {
  color: rgba(0, 0, 0, 0); /* black with 0% opacity */
}

video.text-white-opacity-100::cue {
  color: rgba(255, 255, 255, 1); /* white with full opacity */
}
video.text-white-opacity-50::cue {
  color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
}
video.text-white-opacity-0::cue {
  color: rgba(255, 255, 255, 0); /* white with 0% opacity */
}

video.text-red-opacity-100::cue {
  color: rgba(255, 0, 0, 1); /* red with full opacity */
}
video.text-red-opacity-50::cue {
  color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */
}
video.text-red-opacity-0::cue {
  color: rgba(255, 0, 0, 0); /* red with 0% opacity */
}

video.text-green-opacity-100::cue {
  color: rgba(0, 128, 0, 1); /* green with full opacity */
}
video.text-green-opacity-50::cue {
  color: rgba(0, 128, 0, 0.5); /* green with 50% opacity */
}
video.text-green-opacity-0::cue {
  color: rgba(0, 128, 0, 0); /* green with 0% opacity */
}

video.text-blue-opacity-100::cue {
  color: rgba(0, 0, 255, 1); /* blue with full opacity */
}
video.text-blue-opacity-50::cue {
  color: rgba(0, 0, 255, 0.5); /* blue with 50% opacity */
}
video.text-blue-opacity-0::cue {
  color: rgba(0, 0, 255, 0); /* blue with 0% opacity */
}

video.text-cyan-opacity-100::cue {
  color: rgba(0, 255, 255, 1); /* cyan with full opacity */
}
video.text-cyan-opacity-50::cue {
  color: rgba(0, 255, 255, 0.5); /* cyan with 50% opacity */
}
video.text-cyan-opacity-0::cue {
  color: rgba(0, 255, 255, 0); /* cyan with 0% opacity */
}

video.text-yellow-opacity-100::cue {
  color: rgba(255, 255, 0, 1); /* yellow with full opacity */
}
video.text-yellow-opacity-50::cue {
  color: rgba(255, 255, 0, 0.5); /* yellow with 50% opacity */
}
video.text-yellow-opacity-0::cue {
  color: rgba(255, 255, 0, 0); /* yellow with 0% opacity */
}

video.text-magenta-opacity-100::cue {
  color: rgba(255, 0, 255, 1); /* magenta with full opacity */
}
video.text-magenta-opacity-50::cue {
  color: rgba(255, 0, 255, 0.5); /* magenta with 50% opacity */
}
video.text-magenta-opacity-0::cue {
  color: rgba(255, 0, 255, 0); /* magenta with 0% opacity */
}

/* Background Color and Opacity Combinations */
/* This is assuming that initial color is black as opacity on text cannot be set in combination with color initial */
video.background-color-initial-opacity-100::cue {
  background-color: rgba(0, 0, 0, 1); /* color-initial with full opacity */
}
video.background-color-initial-opacity-50::cue {
  background-color: rgba(0, 0, 0, 0.5); /* color-initial with 50% opacity */
}
video.background-color-initial-opacity-0::cue {
  background-color: rgba(0, 0, 0, 0); /* color-initial with 0% opacity */
}

video.background-black-opacity-100::cue {
  background-color: rgba(0, 0, 0, 1); /* black with full opacity */
}
video.background-black-opacity-50::cue {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}
video.background-black-opacity-0::cue {
  background-color: rgba(0, 0, 0, 0); /* black with 0% opacity */
}

video.background-white-opacity-100::cue {
  background-color: rgba(255, 255, 255, 1); /* white with full opacity */
}
video.background-white-opacity-50::cue {
  background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
}
video.background-white-opacity-0::cue {
  background-color: rgba(255, 255, 255, 0); /* white with 0% opacity */
}

video.background-red-opacity-100::cue {
  background-color: rgba(255, 0, 0, 1); /* red with full opacity */
}
video.background-red-opacity-50::cue {
  background-color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */
}
video.background-red-opacity-0::cue {
  background-color: rgba(255, 0, 0, 0); /* red with 0% opacity */
}

video.background-green-opacity-100::cue {
  background-color: rgba(0, 128, 0, 1); /* green with full opacity */
}
video.background-green-opacity-50::cue {
  background-color: rgba(0, 128, 0, 0.5); /* green with 50% opacity */
}
video.background-green-opacity-0::cue {
  background-color: rgba(0, 128, 0, 0); /* green with 0% opacity */
}

video.background-blue-opacity-100::cue {
  background-color: rgba(0, 0, 255, 1); /* blue with full opacity */
}
video.background-blue-opacity-50::cue {
  background-color: rgba(0, 0, 255, 0.5); /* blue with 50% opacity */
}
video.background-blue-opacity-0::cue {
  background-color: rgba(0, 0, 255, 0); /* blue with 0% opacity */
}

video.background-cyan-opacity-100::cue {
  background-color: rgba(0, 255, 255, 1); /* cyan with full opacity */
}
video.background-cyan-opacity-50::cue {
  background-color: rgba(0, 255, 255, 0.5); /* cyan with 50% opacity */
}
video.background-cyan-opacity-0::cue {
  background-color: rgba(0, 255, 255, 0); /* cyan with 0% opacity */
}

video.background-yellow-opacity-100::cue {
  background-color: rgba(255, 255, 0, 1); /* yellow with full opacity */
}
video.background-yellow-opacity-50::cue {
  background-color: rgba(255, 255, 0, 0.5); /* yellow with 50% opacity */
}
video.background-yellow-opacity-0::cue {
  background-color: rgba(255, 255, 0, 0); /* yellow with 0% opacity */
}

video.background-magenta-opacity-100::cue {
  background-color: rgba(255, 0, 255, 1); /* magenta with full opacity */
}
video.background-magenta-opacity-50::cue {
  background-color: rgba(255, 0, 255, 0.5); /* magenta with 50% opacity */
}
video.background-magenta-opacity-0::cue {
  background-color: rgba(255, 0, 255, 0); /* magenta with 0% opacity */
}

/* Window Color and Opacity Combinations */
/* No window for as broadcast */
video.window-color-initial-opacity-100::cue,
video.window-color-initial-opacity-50::cue,
video.window-color-initial-opacity-0::cue {
  outline: none;
}

video.window-black-opacity-100::cue {
  outline: 100px solid rgba(0, 0, 0, 1); /* black with full opacity */
}
video.window-black-opacity-50::cue {
  outline: 100px solid rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}
video.window-black-opacity-0::cue {
  outline: 100px solid rgba(0, 0, 0, 0); /* black with 0% opacity */
}

video.window-white-opacity-100::cue {
  outline: 100px solid rgba(255, 255, 255, 1); /* white with full opacity */
}
video.window-white-opacity-50::cue {
  outline: 100px solid rgba(255, 255, 255, 0.5); /* white with 50% opacity */
}
video.window-white-opacity-0::cue {
  outline: 100px solid rgba(255, 255, 255, 0); /* white with 0% opacity */
}

video.window-red-opacity-100::cue {
  outline: 100px solid rgba(255, 0, 0, 1); /* red with full opacity */
}
video.window-red-opacity-50::cue {
  outline: 100px solid rgba(255, 0, 0, 0.5); /* red with 50% opacity */
}
video.window-red-opacity-0::cue {
  outline: 100px solid rgba(255, 0, 0, 0); /* red with 0% opacity */
}

video.window-green-opacity-100::cue {
  outline: 100px solid rgba(0, 128, 0, 1); /* green with full opacity */
}
video.window-green-opacity-50::cue {
  outline: 100px solid rgba(0, 128, 0, 0.5); /* green with 50% opacity */
}
video.window-green-opacity-0::cue {
  outline: 100px solid rgba(0, 128, 0, 0); /* green with 0% opacity */
}

video.window-blue-opacity-100::cue {
  outline: 100px solid rgba(0, 0, 255, 1); /* blue with full opacity */
}
video.window-blue-opacity-50::cue {
  outline: 100px solid rgba(0, 0, 255, 0.5); /* blue with 50% opacity */
}
video.window-blue-opacity-0::cue {
  outline: 100px solid rgba(0, 0, 255, 0); /* blue with 0% opacity */
}

video.window-cyan-opacity-100::cue {
  outline: 100px solid rgba(0, 255, 255, 1); /* cyan with full opacity */
}
video.window-cyan-opacity-50::cue {
  outline: 100px solid rgba(0, 255, 255, 0.5); /* cyan with 50% opacity */
}
video.window-cyan-opacity-0::cue {
  outline: 100px solid rgba(0, 255, 255, 0); /* cyan with 0% opacity */
}

video.window-yellow-opacity-100::cue {
  outline: 100px solid rgba(255, 255, 0, 1); /* yellow with full opacity */
}
video.window-yellow-opacity-50::cue {
  outline: 100px solid rgba(255, 255, 0, 0.5); /* yellow with 50% opacity */
}
video.window-yellow-opacity-0::cue {
  outline: 100px solid rgba(255, 255, 0, 0); /* yellow with 0% opacity */
}

video.window-magenta-opacity-100::cue {
  outline: 100px solid rgba(255, 0, 255, 1); /* magenta with full opacity */
}
video.window-magenta-opacity-50::cue {
  outline: 100px solid rgba(255, 0, 255, 0.5); /* magenta with 50% opacity */
}
video.window-magenta-opacity-0::cue {
  outline: 100px solid rgba(255, 0, 255, 0); /* magenta with 0% opacity */
}

/* Text Edges with color combination */
/* TODO: Ask for styles from the design team*/
video.text-edge-initial-color-initial::cue,
video.text-edge-initial-black::cue,
video.text-edge-initial-white::cue,
video.text-edge-initial-red::cue,
video.text-edge-initial-green::cue,
video.text-edge-initial-blue::cue,
video.text-edge-initial-cyan::cue,
video.text-edge-initial-yellow::cue,
video.text-edge-initial-magenta::cue {
  text-shadow: initial;
}

video.text-edge-none-color-initial::cue,
video.text-edge-none-black::cue,
video.text-edge-none-white::cue,
video.text-edge-none-red::cue,
video.text-edge-none-green::cue,
video.text-edge-none-blue::cue,
video.text-edge-none-cyan::cue,
video.text-edge-none-yellow::cue,
video.text-edge-none-magenta::cue {
  text-shadow: none;
}

/* Assuming Text Edge with color initial is black */
video.text-edge-raised-black::cue,
video.text-edge-raised-color-initial::cue {
  text-shadow: -2px -1.5px 0 #000;
}
video.text-edge-raised-white::cue {
  text-shadow: -2px -1.5px 0 #fff;
}
video.text-edge-raised-red::cue {
  text-shadow: -2px -1.5px 0 #f00;
}
video.text-edge-raised-green::cue {
  text-shadow: -2px -1.5px 0 #008000;
}
video.text-edge-raised-blue::cue {
  text-shadow: -2px -1.5px 0 #00f;
}
video.text-edge-raised-cyan::cue {
  text-shadow: -2px -1.5px 0 #0ff;
}
video.text-edge-raised-yellow::cue {
  text-shadow: -2px -1.5px 0 #ff0;
}
video.text-edge-raised-magenta::cue {
  text-shadow: -2px -1.5px 0 #f0f;
}

video.text-edge-uniform-color-initial::cue,
video.text-edge-uniform-black::cue {
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}
video.text-edge-uniform-white::cue {
  text-shadow:
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    2px 2px 0 #fff;
}
video.text-edge-uniform-red::cue {
  text-shadow:
    -2px -2px 0 #f00,
    2px -2px 0 #f00,
    -2px 2px 0 #f00,
    2px 2px 0 #f00;
}
video.text-edge-uniform-green::cue {
  text-shadow:
    -2px -2px 0 #008000,
    2px -2px 0 #008000,
    -2px 2px 0 #008000,
    2px 2px 0 #008000;
}
video.text-edge-uniform-blue::cue {
  text-shadow:
    -2px -2px 0 #00f,
    2px -2px 0 #00f,
    -2px 2px 0 #00f,
    2px 2px 0 #00f;
}
video.text-edge-uniform-cyan::cue {
  text-shadow:
    -2px -2px 0 #0ff,
    2px -2px 0 #0ff,
    -2px 2px 0 #0ff,
    2px 2px 0 #0ff;
}
video.text-edge-uniform-yellow::cue {
  text-shadow:
    -2px -2px 0 #ff0,
    2px -2px 0 #ff0,
    -2px 2px 0 #ff0,
    2px 2px 0 #ff0;
}
video.text-edge-uniform-magenta::cue {
  text-shadow:
    -2px -2px 0 #f0f,
    2px -2px 0 #f0f,
    -2px 2px 0 #f0f,
    2px 2px 0 #f0f;
}

video.text-edge-drop-shadow-color-initial::cue,
video.text-edge-drop-shadow-black::cue {
  text-shadow: 2px 2px 2.5px #000;
}
video.text-edge-drop-shadow-white::cue {
  text-shadow: 2px 2px 2.5px #fff;
}
video.text-edge-drop-shadow-red::cue {
  text-shadow: 2px 2px 2.5px #f00;
}
video.text-edge-drop-shadow-green::cue {
  text-shadow: 2px 2px 2.5px #008000;
}
video.text-edge-drop-shadow-blue::cue {
  text-shadow: 2px 2px 2.5px #00f;
}
video.text-edge-drop-shadow-cyan::cue {
  text-shadow: 2px 2px 2.5px #0ff;
}
video.text-edge-drop-shadow-yellow::cue {
  text-shadow: 2px 2px 2.5px #ff0;
}
video.text-edge-drop-shadow-magenta::cue {
  text-shadow: 2px 2px 2.5px #f0f;
}

video.text-edge-depressed-color-initial::cue,
video.text-edge-depressed-black::cue {
  text-shadow: 2px 2px 0 #000;
}
video.text-edge-depressed-white::cue {
  text-shadow: 2px 2px 0 #fff;
}
video.text-edge-depressed-red::cue {
  text-shadow: 2px 2px 0 #f00;
}
video.text-edge-depressed-green::cue {
  text-shadow: 2px 2px 0 #008000;
}
video.text-edge-depressed-blue::cue {
  text-shadow: 2px 2px 0 #00f;
}
video.text-edge-depressed-cyan::cue {
  text-shadow: 2px 2px 0 #0ff;
}
video.text-edge-depressed-yellow::cue {
  text-shadow: 2px 2px 0 #ff0;
}
video.text-edge-depressed-magenta::cue {
  text-shadow: 2px 2px 0 #f0f;
}