/* Copyright Ayers Electronics Inc. All rights reserved. */
/* captions: WebVTT cues over the picture. */
/* ---- captions: WebVTT cues over the picture, legible on white video, clear of the banner ---- */
.captions {
  /* The viewer's own subtitle style wins; the page's legible defaults stand until one is chosen
     (js/captions-style.js writes the --media-user-* variables the library reads). */
  --cue-color: var(--media-user-text-color, var(--text));
  --cue-bg-color: var(--media-user-text-bg, rgba(6, 6, 8, 0.78));
  --cue-font-size: calc(var(--overlay-height) / 100 * 4.5 * var(--media-user-font-size, 1));
  --cue-line-height: calc(var(--cue-font-size) * 1.2);
  --cue-padding-x: calc(var(--cue-font-size) * 0.6);
  --cue-padding-y: calc(var(--cue-font-size) * 0.4);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  contain: layout style;
  margin: var(--overlay-padding);
  font-size: var(--cue-font-size);
  pointer-events: none;
  user-select: none;
  word-break: break-word;
  bottom: 8px;
  transition: bottom 150ms linear;
}
.captions[aria-hidden="true"] {
  display: none;
}
/* Position: the whole cue layer slides up by a share of its own height, so the cue's size (which
   reads the layer's height) never changes - Middle puts the block's foot near the picture's centre, Top
   near the top edge. Bottom is the layer as it stands. */
#player.caption-pos-middle .captions {
  transform: translateY(-45%);
}
#player.caption-pos-top .captions {
  transform: translateY(-82%);
}
.captions [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[data-dir="rtl"] [data-part="cue-display"] {
  direction: rtl;
}
.captions [data-part="cue"] {
  display: inline-block;
  contain: content;
  border-radius: var(--radius-small);
  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;
}
#player[data-controls] .captions {
  bottom: 220px;
} /* clear of the banner while it is up */
#player[data-preview] .captions {
  opacity: 0;
}