.captions {
  @apply font-roboto font-medium;
  /* Recommended settings in the WebVTT spec (https://www.w3.org/TR/webvtt1). */
  /* --cue-color: var(--media-cue-color, white); */
  /* --cue-color: white; */
  /* z-index: 20; */
  /* --cue-bg-color: var(--media-cue-bg, rgba(0, 0, 0, 0.7)); */

  /* bg color white */
  --cue-bg-color: rgba(255, 255, 255, 0.9);
  --cue-font-size: calc(var(--overlay-height) / 100 * 5);
  --cue-line-height: calc(var(--cue-font-size) * 1.2);
  --cue-padding-x: 0.5em;
  --cue-padding-y: 0.1em;

  /* remove background blur */

  /* --cue-text-shadow: 0 0 5px black; */

  font-size: var(--cue-font-size);
  word-spacing: normal;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
  /* contain: layout style; */
}

.captions[data-dir="rtl"] :global([data-part="cue-display"]) {
  direction: rtl;
}

.captions[aria-hidden="true"] {
  display: none;
}

/*************************************************************************************************
 * Cue Display
 *************************************************************************************************/

/*
* Most of the cue styles are set automatically by our [media-captions](https://github.com/vidstack/media-captions)
* library via CSS variables. They are inferred from the VTT, SRT, or SSA file cue settings. You're
* free to ignore them and style the captions as desired, but we don't recommend it unless the
* captions file contains no cue settings. Otherwise, you might be breaking accessibility.
*/
.captions :global([data-part="cue-display"]) {
  position: absolute;
  direction: ltr;
  overflow: visible;
  contain: content;
  top: var(--cue-top);
  left: var(--cue-left);
  right: var(--cue-right);
  bottom: var(--cue-bottom);
  width: var(--cue-width, auto);
  height: var(--cue-height, auto);
  transform: var(--cue-transform);
  text-align: var(--cue-text-align);
  writing-mode: var(--cue-writing-mode, unset);
  white-space: pre-line;
  unicode-bidi: plaintext;
  min-width: min-content;
  min-height: min-content;
}

.captions :global([data-part="cue"]) {
  display: inline-block;
  contain: content;
  /* border-radius: 2px; */
  /* backdrop-filter: unset; */
  padding: var(--cue-padding-y) var(--cue-padding-x);
  line-height: var(--cue-line-height);
  /* background-color: var(--cue-bg-color); */
  color: var(--cue-color);
  white-space: pre-wrap;
  outline: var(--cue-outline);
  text-shadow: var(--cue-text-shadow);
}

.captions :global([data-part="cue-display"][data-vertical] [data-part="cue"]) {
  padding: var(--cue-padding-x) var(--cue-padding-y);
}
