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

.ds-teaser.ds-teaser--native {
  overflow: hidden;
  border-bottom: 4px solid $ds-color-surface-ad-yellow;

  &:focus-visible {
    outline: none;

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

  .ds-teaser__media {
    margin-bottom: ds-spacing($ds-s-100);
  }

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

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

  .ds-teaser__title {
    @include ds-typography($ds-typography-expressive-heading-sm) {
      font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  &.ds-teaser--native-right,
  &.ds-teaser--native-large {
    .ds-teaser__media {
      margin: 0;
    }
  }

  &.ds-teaser--native-large {
    .ds-teaser__title {
      @include ds-mq-only-breakpoint(mobile) {
        @include ds-typography($ds-typography-expressive-heading-xl);
      }

      @include ds-mq-only-breakpoint(tablet) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-xl,
          40,
          $lineHeight: $ds-lineheight-sm,
          $weight: $ds-fontweight-bold,
          $scaling: "large"
        );
      }

      @include ds-mq-only-breakpoint(desktop) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-xl,
          56,
          $lineHeight: $ds-lineheight-sm,
          $weight: $ds-fontweight-bold,
          $scaling: "extraLarge"
        );
      }
    }
  }

  &.ds-teaser--native-right {
    .ds-teaser__title {
      @include ds-mq-only-breakpoint(mobile) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-sm,
          17,
          $weight: $ds-fontweight-bold,
          $lineHeight: $ds-lineheight-md,
          $scaling: "large"
        );
      }

      @include ds-mq-smallest-breakpoint(tablet) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-sm,
          24,
          $weight: $ds-fontweight-bold,
          $lineHeight: 1.25,
          $scaling: "extraLarge"
        );
      }
    }
  }

  &.ds-teaser--native-standard {
    .ds-teaser__title {
      @include ds-mq-only-breakpoint(mobile) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-xl,
          20,
          $weight: $ds-fontweight-bold,
          $lineHeight: $ds-lineheight-md
        );
      }

      @include ds-mq-only-breakpoint(tablet) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-xl,
          26,
          $weight: $ds-fontweight-bold,
          $lineHeight: $ds-lineheight-sm,
          $scaling: "large"
        );
      }

      @include ds-mq-only-breakpoint(desktop) {
        @include ds-typography-manual(
          $ds-typography-expressive-heading-xl,
          36,
          $weight: $ds-fontweight-bold,
          $lineHeight: $ds-lineheight-sm,
          $scaling: "extraLarge"
        );
      }
    }

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

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

  .ds-teaser__ad-bar {
    background-color: $ds-color-surface-ad-yellow;
    display: flex;
    height: ds-px-to-rem(40px);
    font-family: $ds-font--sans;
    font-size: ds-px-to-rem(16px);
    line-height: ds-px-to-rem(12px);

    span {
      display: flex;
      align-items: center;
      padding: ds-spacing(0 $ds-s-100);
      background-color: $ds-color-neutral-black;
      color: $ds-color-neutral-white;
    }
  }

  .ds-teaser__vignette {
    color: $ds-color-text-primary;
  }

  .ds-teaser-dot {
    color: $ds-color-text-primary;
  }
}
