@use 'sass:math';

.#{$prefix}-ui-subtitle-overlay {
  --cea608-row-height: math.div(100%, 15);

  &.#{$prefix}-cea608 {
    bottom: 2em;
    left: 3em;
    right: 3em;
    top: 2em;

    .#{$prefix}-subtitle-region-container {
      height: var(--cea608-row-height);
      left: 0;
      line-height: 1;
      right: 0;
      text-align: left;

      // Define positions for all 15 rows
      @for $i from 0 through 14 {
        &.#{$prefix}-subtitle-position-cea608-row-#{$i} {
          top: calc(var(--cea608-row-height) * #{$i});
        }
      }
    }

    .#{$prefix}-ui-subtitle-label {
      display: inline-block;
      font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;
      position: absolute;
      text-transform: uppercase;
      white-space: nowrap;

      // center vertically
      top: 50%;
      transform: translateY(-50%);

      // sass-lint:disable force-pseudo-nesting nesting-depth
      &:nth-child(1n-1)::after {
        content: normal;
        white-space: normal;
      }
    }
  }
}