@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/teaser/teaser.scss" as *;

.ds-teaser.ds-teaser--large {
  display: flex;
  flex-direction: column;
  position: relative;

  .ds-teaser__media {
    video {
      max-width: 100%;
    }
  }

  .ds-teaser__content {
    display: flex;
    flex-direction: row;
    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);

    .ds-teaser__content-inner {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
  }

  &:focus-visible {
    outline: none !important; /* stylelint-disable-line declaration-no-important */

    .ds-teaser__content {
      @include ds-teaser-focus(-8px, false);
    }
  }

  .ds-teaser__vignette {
    margin-top: ds-spacing($ds-s-025);
  }

  .ds-teaser__title {
    @include ds-typography($ds-typography-detail-teaser-large);
  }

  @include ds-hover(true) {
    .ds-teaser__title {
      @include ds-underline(3px);
    }
  }

  &.ds-teaser--large-big-italic {
    .ds-teaser__title {
      @include ds-typography($ds-typography-detail-teaser-storrubrik-opinion);
    }
  }

  &.ds-teaser--large-italic {
    .ds-teaser__title {
      @include ds-typography($ds-typography-detail-teaser-large-opinion);
    }

    @include ds-hover(true) {
      .ds-teaser__title {
        @include ds-underline();
      }
    }
  }

  @include ds-mq-smallest-breakpoint(tablet) {
    &.ds-teaser--right {
      .ds-teaser__title {
        @include ds-typography($ds-typography-detail-teaser-large-rightcol, $lineHeight: 1.2);
      }

      &.ds-teaser--large-italic .ds-teaser__title {
        @include ds-typography(
          $ds-typography-detail-teaser-large-rightcol,
          $fontWeight: $ds-fontweight-regular,
          $fontStyle: italic,
          $lineHeight: 1.2
        );

        @include ds-hover(true) {
          .ds-teaser__title {
            @include ds-underline(2px, 1px);
          }
        }
      }

      .ds-teaser__byline {
        width: 96px;
        min-height: 96px;
        margin-left: ds-spacing($ds-s-050);
      }
    }
  }
}