@import '../../variables';
@import '../../mixins';

.#{$prefix}-ui-uicontainer {
  .#{$prefix}-ui-subtitle-overlay {
    @extend %ui-container;

    @include hidden;

    bottom: env(safe-area-inset-bottom, 0);
    left: env(safe-area-inset-left, 0);
    pointer-events: none;
    position: absolute;
    right: env(safe-area-inset-right, 0);
    text-align: center;
    top: env(safe-area-inset-top, 0);
    transition: bottom $animation-duration-short ease-out;

    * {
      // This aims to prevent possibly conflicting style definitions inherited
      // from target applications which can break subtitles styling. It's still possible
      // to override this with selector of higher priority score.
      all: unset;
    }

    p {
      // It may happen that we render <p> inside of an <span> and the `all: unset;` reseting above sets
      // p to inherit the inline display instead of its default display block so this sets it back.
      display: block;
    }

    // Restore semantic inline formatting that `all: unset` above strips. Subtitle cues
    // (CEA-608, WebVTT) use these tags to convey italic/bold/underlined text.
    i,
    em {
      font-style: italic;
    }

    b,
    strong {
      font-weight: bolder;
    }

    u {
      text-decoration: underline;
    }

    .#{$prefix}-subtitle-region-container {
      position: absolute;

      &.#{$prefix}-subtitle-position-default {
        bottom: 2em;
        left: 3em;
        right: 3em;
        top: initial;
      }

      &.#{$prefix}-subtitle-position-bottom > div {
        bottom: 0;
        position: absolute;
        width: 100%;
      }
    }

    .#{$prefix}-ui-subtitle-label {
      @include text-border($subtitle-text-border-color);

      color: $subtitle-text-color;
      height: fit-content;

      // Break labels into separate lines
      // sass-lint:disable force-pseudo-nesting
      &:nth-child(1n-1)::after {
        content: '\A';
        // VTT flex styling can increase this elements height, making the background larger
        height: 0;
        white-space: pre-line;
        width: 0;
      }
    }

    .#{$prefix}-ui-subtitle-label.#{$prefix}-subtitle-vtt-cue,
    .#{$prefix}-subtitle-vtt-region-container .#{$prefix}-ui-subtitle-label {
      .#{$prefix}-ui-label-text {
        max-width: 100%;
        width: fit-content;
      }

      &[style*='text-align: center'] .#{$prefix}-ui-label-text {
        margin-left: auto;
        margin-right: auto;
      }

      &[style*='text-align: right'] .#{$prefix}-ui-label-text {
        margin-left: auto;
      }

      &[style*='text-align: end'] .#{$prefix}-ui-label-text {
        margin-inline-start: auto;
      }

      &[style*='text-align: start'] .#{$prefix}-ui-label-text {
        margin-inline-end: auto;
      }
    }

    // Move the subtitle up above the controlbar when it appears to avoid them overlapping
    &.#{$prefix}-controlbar-visible {
      bottom: 5em;
      transition: bottom $animation-duration-short ease-in;
    }
  }
}