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

.ds-teaser.ds-teaser--longlife {
  position: relative;

  &:focus-visible {
    outline: none;

    .ds-teaser__content {
      @include ds-focus($offset: -8px, $includeSelector: false, $color: $ds-color-neutral-white);
    }
  }

  .ds-teaser-image {
    position: relative;
    width: 100%;
    height: auto;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: $ds-color-surface-overlay;
      z-index: 1;
    }

    figcaption {
      display: none;
    }
  }

  .ds-teaser__content {
    color: $ds-color-neutral-white;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: ds-spacing($ds-s-100);

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

  &:not(:has(.ds-teaser-image)) {
    background-color: $ds-color-neutral-black;

    .ds-teaser__content {
      position: relative;
    }
  }

  .ds-teaser__vignette {
    color: currentColor;
    margin: 0;
    @include ds-typography(
      $ds-typography-functional-label-sm,
      $lineHeight: $ds-lineheight-lg,
      $letterSpacing: $ds-letterspacing-none
    );
  }

  .ds-teaser__title {
    color: currentColor;
    @include ds-typography($ds-typography-detail-teaser-longlife);
  }
}
