@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/teaser/teaser.scss" as *;
@use "../../components/button/button.scss";
@use "../../components/group-header/group-header";
@use "../../components/teaser-swipe-card/teaser-swipe-card";

.ds-teaser.ds-teaser--list-swipe {
  max-width: 100%;
  color: $ds-color-text-primary;

  @include ds-teaser-focus(2px);

  .ds-teaser__carousel {
    margin: ds-spacing(0 $ds-s-100);
    padding-bottom: ds-spacing($ds-s-075);
    overflow-x: scroll;
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: ds-spacing($ds-s-050);

    @include ds-hide-scrollbars();
    @include ds-teaser-focus(2px);

    @include ds-mq-only-breakpoint(mobile) {
      margin: 0;

      .ds-teaser-swipe-card {
        box-sizing: content-box;

        &:first-of-type {
          padding-left: ds-spacing($ds-s-100);
        }

        &:last-of-type {
          padding-right: ds-spacing($ds-s-100);
        }
      }
    }
  }

  @include ds-mq-only-breakpoint(desktop) {
    .ds-teaser__swipe-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;

      &--back {
        left: ds-spacing($ds-s-125);
      }

      &--forward {
        right: ds-spacing($ds-s-125);
      }
    }
  }
}
