/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/resets" as *;

.ams-image-slider {
  display: grid;
  gap: var(--ams-image-slider-gap);
}

.ams-image-slider__slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.ams-image-slider__scroller {
  align-items: center;
  display: grid;
  gap: var(--ams-image-slider-scroller-gap);
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  grid-column: 1/-1;
  grid-row: 1;
  outline-offset: var(--ams-image-slider-scroller-outline-offset);
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /*
   * Required for the goToSlide function to work properly.
   * Ensures that the offset of the slides is calculated relative to the scroller container.
   */
  position: relative;
  scroll-snap-type: x mandatory;

  /*
   * Hide the scrollbar in Firefox.
   * Firefox has full support for this property.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

.ams-image-slider__controls {
  display: flex;
  grid-column: 1/-1;
  grid-row: 1;
  justify-content: space-between;

  @media (pointer: coarse) and (max-width: $ams-breakpoint-medium) {
    display: none;
  }
}

.ams-image-slider__control {
  place-self: center;
  z-index: 1;
}

.ams-image-slider__thumbnails {
  display: grid;
  gap: var(--ams-image-slider-thumbnails-gap);
  grid-template-columns: repeat(5, 1fr);
}

.ams-image-slider__thumbnail {
  @include reset-button;

  aspect-ratio: var(--ams-image-aspect-ratio); // Use the same default aspect ratio as the Image component
  background-color: var(--ams-image-slider-thumbnails-thumbnail-background-color);
  background-position: center;
  background-size: cover;
  cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
  opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
  outline-offset: var(--ams-button-outline-offset);

  &:hover {
    opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
  }
}

.ams-image-slider__thumbnail--in-view {
  opacity: var(--ams-image-slider-thumbnails-thumbnail-in-view-opacity);
}

.ams-image-slider__figure {
  margin-block-end: var(--ams-image-slider-figure-margin-block-end);
}