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

.ds-teaser.ds-teaser--standard {
  padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
  overflow: hidden;

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

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

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

  &.ds-teaser--compact {
    .ds-teaser__title {
      @include ds-typography($ds-typography-detail-teaser-standard-compact);

      &--italic {
        @include ds-typography($ds-typography-detail-teaser-standard-compact-opinion);
      }
    }

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

  &.ds-teaser--standard-without-byline {
    .ds-teaser__media {
      margin-bottom: ds-spacing($ds-s-025);
    }

    .ds-teaser__content .ds-teaser__content-inner {
      margin-bottom: ds-spacing($ds-s-025, "px", true); // Adjust margin to compensate for the media margin
      display: block;
    }
  }

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

  .ds-teaser__content {
    display: flex;
    flex-direction: row;

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

  .ds-teaser__byline {
    float: right;
  }

  .ds-teaser__media {
    margin-top: ds-spacing($ds-s-025);
    margin-bottom: ds-spacing($ds-s-025);
    margin-left: ds-spacing($ds-s-100);
    float: right;

    .ds-teaser-image__byline {
      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
    }

    @include ds-mq-only-breakpoint(mobile) {
      min-width: $ds-teaser-standard-image-width-mobile;
      max-width: $ds-teaser-standard-image-width-mobile;

      .ds-teaser-image__byline {
        display: none;
      }
    }

    @include ds-mq-only-breakpoint(tablet) {
      min-width: $ds-teaser-standard-image-width-tablet;
      max-width: $ds-teaser-standard-image-width-tablet;
    }

    @include ds-mq-only-breakpoint(desktop) {
      min-width: $ds-teaser-standard-image-width-desktop;
      max-width: $ds-teaser-standard-image-width-desktop;
    }

    .teaser__video {
      max-width: 100%;
    }

    &.ds-teaser__media--square-image {
      @include ds-mq-only-breakpoint(mobile) {
        min-width: 80px;
        max-width: 80px;
      }

      @include ds-mq-smallest-breakpoint(tablet) {
        min-width: 124px;
        max-width: 124px;
      }
    }
  }
}