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

a.ds-teaser--counter.ds-teaser {
  color: inherit;
  text-decoration: none;
}

.ds-teaser--counter.ds-teaser {
  display: flex;
  gap: ds-spacing($ds-s-075);
  padding: ds-spacing($ds-s-075);

  .ds-teaser__content-inner {
    display: flex;
    flex-direction: column;
    gap: ds-spacing($ds-s-100);
    height: 100%;
    justify-content: space-between;
  }

  .ds-teaser--counter__title,
  .ds-teaser--counter__counter-text {
    color: $ds-color-text-primary;
  }

  .ds-teaser--counter__title {
    margin: 0;
    @include ds-typography(
      $ds-typography-functional-heading-xs,
      $fontWeight: $ds-fontweight-regular,
      $lineHeight: $ds-lineheight-md
    );
  }

  .ds-teaser--counter__title--highlighted {
    font-weight: $ds-fontweight-bold;
  }

  .ds-teaser--counter__counter-wrapper {
    align-items: center;
    display: flex;
    gap: ds-spacing($ds-s-050);
  }

  .ds-teaser--counter__list {
    display: flex;
    font-variant-numeric: tabular-nums;
    gap: ds-spacing($ds-s-012);
    list-style: none;
    margin: 0;
    padding: 0;
    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-regular);

    .ds-teaser--counter__item {
      align-items: center;
      background-color: $ds-color-brand-500;
      border-radius: ds-border-radius($ds-s-025);
      color: $ds-color-text-on-brand;
      display: flex;
      height: ds-spacing($ds-s-200);
      justify-content: center;
      width: ds-spacing($ds-s-150);
    }
  }

  .ds-teaser--counter__counter-text {
    margin: 0;
    @include ds-typography($ds-typography-functional-meta-md);
  }

  .ds-teaser__media {
    display: flex;
    justify-content: flex-end;
    width: auto;
  }

  // Mobile width is hardcoded based on 2 rows of text content and desktop for 1 row
  .picture--placeholder {
    max-height: 82px;
    min-width: 62px;

    @include ds-mq-only-breakpoint(mobile) {
      max-height: 92px;
      min-width: 69px;
    }
  }

  .picture--placeholder,
  .picture__img {
    border-radius: ds-border-radius($ds-s-025);
  }
}