<div class="slider">
  <div class="slider__content">
    <!-- aria-label should be customized for each carousel, and should not contain the word "carousel" -->
    <!-- aria-labelledby should be used instead, if the carousel has a heading element that describes the carousel, see testimonialSlider.html for an example -->
    <!-- when autoplaying, pause on mouse enter is required for accessibility -->
    <p-slider
      slides-per-view="auto"
      space-between="16"
      navigation="true"
      pagination-clickable="true"
      loop="true"
      aria-label="This should be customized for each carousel"
      :autoplay="{
        speed: 500,
        pauseOnMouseEnter: true,
      }"
      :breakpoints="{
      768: 
        {
          spaceBetween: 32,
        },
      }"
    >
      <swiper-slide loading="lazy" class="placeholder">Slide 1</swiper-slide>
      <swiper-slide loading="lazy" class="placeholder">Slide 2</swiper-slide>
      <swiper-slide loading="lazy" class="placeholder">Slide 3</swiper-slide>
      <swiper-slide loading="lazy" class="placeholder">Slide 4</swiper-slide>
      <swiper-slide loading="lazy" class="placeholder" style="aspect-ratio: 16 / 9">Wide</swiper-slide>
      <swiper-slide loading="lazy" class="placeholder">Slide 6</swiper-slide>
    </p-slider>
  </div>
</div>

@use '@/core' as *;

.slider {
  $b: &;

  --swiper-theme-color: var(--accent-color);

  &__content {
    container-type: inline-size;
    overflow: hidden;
    padding: 0 2rem 4.5rem;

    @include at(md) {
      padding: 0 7rem 6.5rem;
    }
  }

  &__playPause {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
  }

  swiper-slide {
    width: 100cqw;
    height: auto;

    @include at(md) {
      width: auto;
      height: calc(50cqw - 1rem);
    }

    @include at(lg) {
      width: auto;
      height: calc(40cqw - 2rem);
    }
  }

  swiper-container::part(bullet) {
    opacity: 1;
    width: 16px;
    flex-shrink: 0;
    height: 16px;
    background-color: var(--accent-color);
  }

  swiper-container::part(bullet-active) {
    background-color: #000000;
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
  }

  swiper-container::part(container) {
    overflow: visible;
  }

  swiper-container::part(pagination) {
    align-items: center;
    bottom: auto;
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    text-align: left;
    top: 100%;
  }

  swiper-container::part(button-prev),
  swiper-container::part(button-next) {
    background: var(--accent-color);
    width: 1rem;
    border-radius: 3rem;
    height: 1rem;
    padding: 1rem;
    color: #ffffff;
    display: none;

    @include at(md) {
      display: block;
    }
  }

  swiper-container::part(button-prev) {
    position: absolute;
    left: -7rem;
  }

  swiper-container::part(button-next) {
    right: -7rem;
  }

  &.-withCallout {
    #{$b}__content {
      padding: 0 0 2.5rem;

      @include at(md) {
        padding: 0 0 11.5rem;
      }
    }

    swiper-container::part(button-prev),
    swiper-container::part(button-next) {
      top: 1.5rem;
      z-index: 12;
      display: block;

      @include at(md) {
        top: 100%;
        margin-top: 5.25rem;
      }
    }

    swiper-container::part(button-prev) {
      right: 4rem;
      left: auto;

      @include at(md) {
        left: 0;
      }
    }

    swiper-container::part(button-next) {
      right: 0;
    }

    swiper-container::part(pagination) {
      display: none;

      @include at(md) {
        display: flex;
        margin-top: 6rem;
        justify-content: center;
      }
    }

    swiper-slide {
      padding-top: 4rem;

      @include at(md) {
        padding-top: 0;
      }
    }

    #{$b}__callout {
      display: grid;
      gap: 2rem;
    }

    #{$b}__calloutIcon {
      width: 4rem;
      height: 4rem;
    }

    swiper-slide {
      height: auto;

      @include at(md) {
        width: calc(66.66cqw);
      }

      > * {
        height: 100%;
      }
    }

    @include at(lg) {
      --columns: 3;

      #{$b}__calloutIcon {
        grid-area: 1 / main;
      }

      #{$b}__callout {
        grid-column: main / span 1;
      }
      #{$b}__content {
        grid-column: 3 / main;
      }

      .swiper-slide-next {
        mask: linear-gradient(to right, #ffffff, #00000000 50%);
      }
    }
  }
}