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

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

  @include hidden;

  bottom: 0;
  font-size: 1.2em;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  transition: bottom $animation-duration-short ease-out;
  top: 0;

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

    .#{$prefix}-subtitle-position-default .#{$prefix}-ui-subtitle-label {
      &:nth-child(1n-1)::after {
        content: '\A';
        white-space: pre-line;
      }
    }
  }

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

    color: $subtitle-text-color;
  }

  // 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;
  }
}

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

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

  @include hidden;

  bottom: 0;
  font-size: 1.2em;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  transition: bottom $animation-duration-short ease-out;
  top: 0;

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

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

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

    color: $subtitle-text-color;

    // Break labels into separate lines
    // sass-lint:disable force-pseudo-nesting
    &:nth-child(1n-1)::after {
      content: '\A';
      white-space: pre-line;
    }
  }

  // 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;
  }
}

Add a separate class for subtitle-region-container.
Add a separate class for subtitle-region-container.
