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

@use "../../assets/teaser/teaser.scss" as *;
@use "../../components/teaser-image/teaser-image.scss";

.ds-teaser.ds-teaser-swipe-card {
  display: flex;
  flex-direction: column;
  width: 248px;
  max-width: 66vw; // ensure low-width devices see atleast part of a second teaser
  color: $ds-color-text-primary;
  text-decoration: none;
  margin-bottom: 0;

  &:focus-visible {
    outline: none !important; /* stylelint-disable-line declaration-no-important */

    .ds-teaser__text {
      @include ds-teaser-focus(-4px, false);
    }
  }

  .ds-teaser__text {
    display: flex;
    flex-direction: column;
    padding: ds-spacing($ds-s-075);
    border: ds-border-width(xxs) solid $ds-color-border-primary;
    border-radius: ds-border-radius(012);
    margin: 0;
    flex: 1;
  }

  .ds-teaser-image {
    border-top-right-radius: ds-border-radius(012);
    border-top-left-radius: ds-border-radius(012);
    overflow: hidden;
  }

  .ds-teaser-image + .ds-teaser__text {
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding-top: ds-spacing($ds-s-050);
  }

  .ds-teaser-swipe-card__time {
    @include ds-typography($ds-typography-functional-meta-md, $lineHeight: $ds-lineheight-lg) {
      color: $ds-color-text-primary-subtle;
    }
  }

  .ds-teaser__title {
    margin-bottom: ds-spacing($ds-s-050);
    flex: 1;
    @include ds-typography($ds-typography-expressive-heading-xxs);
  }

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

  &.ds-teaser-swipe-card--insandare {
    .ds-teaser__title {
      @include ds-typography(
        $ds-typography-expressive-heading-xxs,
        $fontWeight: $ds-fontweight-medium,
        $fontStyle: italic
      );
    }
  }

  &.ds-teaser-swipe-card--direkt {
    &:not(:last-of-type) {
      margin-right: ds-spacing($ds-s-050);
    }

    .ds-teaser__text {
      padding: ds-spacing($ds-s-025 0 0 0);
      border: none;
      border-radius: 0;
    }

    &:focus-visible {
      .ds-teaser__text {
        @include ds-teaser-focus(-2px, false);
      }
    }

    .ds-teaser-swipe-card__time {
      display: flex;
      align-items: center;
      margin-bottom: ds-spacing($ds-s-025);
      @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold) {
        color: $ds-theme-color;
      }

      &::before {
        content: "";
        display: block;
        width: ds-spacing($ds-s-050);
        height: ds-spacing($ds-s-050);
        background-color: $ds-theme-color;
        border-radius: 50%;
        margin-right: ds-spacing($ds-s-050);
      }

      &::after {
        content: "";
        display: block;
        height: ds-border-width(xxs);
        flex: 1;
        background-color: $ds-color-border-primary;
        margin-left: ds-spacing($ds-s-050);
      }
    }
  }
}
