@property --media-slider-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --media-slider-buffer {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}


/* -------------------------------------------------------------------------- */
/* Global styles for the host document, outside of the Shadow DOM             */
/* -------------------------------------------------------------------------- */

video-player,
live-video-player,
media-i18n,
media-dialog,
media-alert-dialog,
media-error-dialog,
media-controls {
  display: contents;
}

/*
Required to override any default video and image styles (such as
Tailwind's CSS reset) and ensure they fill the container as expected.
*/
media-container video,
media-container [slot="poster"] {
  display: block;
  width: 100%;
  height: 100%;
}

media-container video::-webkit-media-text-track-container {
  z-index: 1;
  font-family: inherit;
  scale: 0.98;
  translate: 0 var(--media-caption-track-y, 0);
  transition: translate var(--media-caption-track-duration, 0) ease-out;
  transition-delay: var(--media-caption-track-delay, 0);
}