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

@mixin ds-teaser__native-ad-bar() {
  display: flex;
  background-color: $ds-color-surface-native-subtle;
  padding: ds-spacing($ds-s-075 $ds-s-100);

  @include ds-typography($ds-typography-functional-body-sm);
}

@mixin ds-native-ad-bar__label() {
  color: $ds-color-neutral-black;
  background-color: $ds-color-surface-native;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  padding: ds-spacing($ds-s-025 $ds-s-050);
  border-radius: ds-border-radius(025);
  align-self: flex-start;

  @include ds-typography($ds-typography-functional-meta-md, $fontWeight: $ds-fontweight-semibold);
}

@mixin ds-teaser__native-ad-bar__description() {
  color: $ds-color-text-primary;
  margin-left: ds-spacing($ds-s-075);
  overflow: hidden;
  overflow-wrap: break-word;
}

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

  &: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--native-right,
  &.ds-teaser--native-large {
    .ds-teaser__media {
      margin: 0;
    }
  }

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

  &.ds-teaser--native-right {
    .ds-teaser__title {
      @include ds-typography-without-mq($ds-typography-detail-teaser-large-native, mobile);
    }
  }

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

    .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__native-ad-bar {
    @include ds-teaser__native-ad-bar();
  }

  .ds-teaser__native-ad-bar__label {
    @include ds-native-ad-bar__label();
  }

  .ds-teaser__native-ad-bar__description {
    @include ds-teaser__native-ad-bar__description();
  }
}