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

.ds-teaser.ds-teaser--text-on-image {
  overflow: hidden;

  .ds-teaser__vignette {
    color: $ds-color-neutral-white;
  }

  .ds-teaser__content {
    position: relative;
    color: $ds-color-neutral-white;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
      z-index: 2;
    }

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

  .ds-teaser__title,
  .ds-teaser__text {
    position: relative;
    color: $ds-color-neutral-white;
  }

  .ds-teaser__text {
    margin-top: ds-spacing($ds-s-100);
  }

  .ds-teaser__title {
    margin-top: ds-spacing($ds-s-050);

    @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
  }

  .ds-teaser-image__byline,
  .ds-teaser__text-content {
    z-index: 3;
  }

  .ds-teaser__text-content {
    position: absolute;
    bottom: ds-spacing($ds-s-200);
    left: ds-spacing($ds-s-100);
    max-width: 90%;

    @include ds-mq-only-breakpoint(desktop) {
      max-width: 75%;
    }
  }

  .ds-teaser__media {
    .picture {
      width: 100%;
      height: 100%;
    }

    .ds-teaser-image__byline {
      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
    }
  }
}