.lower-third {
  margin: 0;
  width: 100%;
  height: 100%;

  .container {
    position: absolute;
    display: block;
    top: 75vh;
    line-height: normal;

    .line {
      width: 100%;
      height: var(--lowerThird-line-height-override, 0.5vh);
    }

    .clip {
      overflow: hidden;
    }

    .data-bottom,
    .data-top {
      padding: 0 3vw;
      font-family: var(--lowerThird-font-family-override), Lato, Arial, sans-serif;
      text-align: var(--lowerThird-text-align-override, right);
      white-space: nowrap;
      @include ellipsis-text();

      &::after {
        content: '\200b';
      }
    }

    .data-top {
      font-weight: var(--lowerThird-top-font-weight-override, 600);
      font-style: var(--lowerThird-top-font-style-override, normal);
    }

    .data-bottom {
      font-weight: var(--lowerThird-bottom-font-weight-override, 540);
      font-style: var(--lowerThird-bottom-font-style-override, normal);
    }

    &--in {
      transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
    }

    &--out {
      transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5);
      transform: translateX(-100%);
      opacity: 0;
      .data-top {
        transform: translateY(100%);
      }
      .data-bottom {
        transform: translateY(-100%);
      }
    }
  }
}
