/** biome-ignore-all lint/complexity/noImportantStyles: video styles set by js must be overridden using !important */
video {
  display: block;
  position: absolute;
  top: 0;
  background: none;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
/**
 * Override the default styling of text tracks.
 * The browser applies styles directly to the elements so
 * we need to use !important to override them.
 */
video::-webkit-media-text-track-display {
  padding: var(--space-2x) var(--space-6x);

  width: fit-content !important;
  max-width: 80% !important;

  /**
   * horizontal centering, vertical positioning is handled by the browser
   */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

video::-webkit-media-text-track-container {
  /**
   * The font-size on the track container affects the cue font-size which is set using percentages.
   * The percentage is not set in our CSS but by using the CAF TextTrackStyle APIs in JS.
   * See src/cast/text-track.ts
   */
  font-size: 3rem !important;
}

video::cue {
  background: var(--surface-surface-black-70) !important;
  line-height: 1.35;
  font-family: "Univers" !important;
}