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

.ds-teaser.ds-teaser--slideshow {
  background-color: $ds-color-surface-primary;
  overflow: hidden;
  max-height: 230px;
  box-sizing: border-box;

  @include ds-mq-smallest-breakpoint(tablet) {
    &.ds-teaser--right {
      max-width: 300px;
    }
  }

  .ds-teaser__content {
    padding: ds-spacing($ds-s-100);
    display: block;
    color: $ds-color-text-primary;
    line-height: 0; // The parent of the inline-elements must have line-height 0 to ensure that the line-height set for the inline-elements actually has expected effect.

    .ds-teaser__title {
      display: inline;
      @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md);
    }

    .ds-teaser__text {
      display: inline;
      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-md);
    }
  }

  @include ds-hover {
    &:hover .ds-teaser__content .ds-teaser__title {
      text-decoration: none;
    }
  }

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