@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/icon-sprite/icon-sprite.scss";
@use "../../components/teaser-image/teaser-image.scss";
@use "../../components/teaser-dot/teaser-dot.scss";
@use "../../components/teaser-footer/teaser-footer.scss";

// used in standard and native teaser
$ds-teaser-standard-image-width-mobile: 104px;
$ds-teaser-standard-image-width-tablet: 156px;
$ds-teaser-standard-image-width-desktop: 196px;

@mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
  @include ds-focus($offset, $includeSelector);
}

.ds-teaser {
  display: block;
  background-color: $ds-color-surface-primary;
  text-decoration: none;
  position: relative;

  @include ds-teaser-focus(-8px);

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

  .ds-teaser__vignette {
    display: block;
    margin-bottom: ds-spacing($ds-s-025);
    @include ds-typography($ds-typography-functional-label-sm) {
      color: $ds-theme-color;
    }
  }

  .ds-teaser__title {
    color: $ds-color-text-primary;
    margin: 0;
    word-break: break-word;

    .ds-teaser__highlight {
      color: $ds-theme-color;
    }
  }

  @include ds-hover(true) {
    > .ds-teaser__title,
    > .ds-teaser__content > .ds-teaser__title,
    > .ds-teaser__text > .ds-teaser__title {
      @include ds-underline();
    }
  }

  .ds-teaser__text {
    // Should be replaced with dynamic spacing layout token when available
    margin: ds-spacing($ds-s-050 0 0);
    @include ds-typography($ds-typography-detail-medryckare) {
      color: $ds-color-text-primary;
    }
    @include ds-mq-smallest-breakpoint(tablet) {
      margin-top: ds-spacing($ds-s-075);
    }
  }

  .ds-teaser__sticker {
    display: inline;
    color: $ds-theme-color;
    @include ds-typography($ds-typography-functional-label-sm);
  }

  .ds-teaser__media {
    width: 100%;
    position: relative;
    box-sizing: border-box;

    &--rounded {
      border-radius: ds-border-radius(012);
      overflow: hidden;
    }
  }

  .ds-teaser__byline {
    overflow: hidden;
    position: relative;
    margin-left: ds-spacing($ds-s-100);
    margin-bottom: ds-spacing($ds-s-100, "px", true);
    margin-top: ds-spacing($ds-s-025);

    .picture {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      min-width: 100%;
      margin: auto 0 0;
      max-height: 100%;

      .picture__img {
        margin: 0;
        object-position: top;
        max-height: unset;
      }
    }

    @include ds-mq-largest-breakpoint(mobile) {
      width: 96px;
      min-height: 96px;
      margin-left: ds-spacing($ds-s-050);
    }

    @include ds-mq-smallest-breakpoint(tablet) {
      width: 144px;
      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
      min-height: 110px;
      margin-left: ds-spacing($ds-s-100);
    }
  }

  &--podcast {
    .ds-teaser__vignette {
      display: flex;
      align-items: center;
    }

    .ds-icon--headphones {
      height: ds-px-to-rem(16px);
      width: ds-px-to-rem(16px);
      margin-right: ds-spacing($ds-s-025);
    }
  }

  &--bauta {
    background-color: $ds-color-surface-breaking;
  }
}