@import './styles/swiper.scss';

.image-slider {
  user-select: none;

  &__thumbs {
    margin-top: var(--sc-slider-spacing, var(--sc-spacing-small));
    display: flex;
    align-items: stretch;

    .swiper {
      flex: 1; // important to prevent slideshow from collapsing.
    }

    .image-slider__navigation {
      display: none;
    }
    &--has-navigation {
      .image-slider__navigation {
        display: flex;
      }
    }
  }

  &__navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;

    &.image-slider {
      &--is-prev {
        padding-right: 8px;
      }
      &--is-next {
        padding-left: 8px;
      }
    }

    &.swiper-button-disabled {
      opacity: 0.25;
      cursor: default;
    }
  }

  /** Slider **/
  &__slider {
    height: var(--sc-product-slider-height, auto);
    cursor: grab;

    .swiper-slide-img {
      width: 100%;
      height: 100%;
      text-align: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 5px;
      }
    }
  }

  /** Thumbnails **/
  &__thumb {
      cursor: pointer;
      width: 100%;

      img {
        max-width: 100%;
        width: 450px;
        display: block;
        object-fit: var(--sc-image-slideshow-thumb-object-fit, cover);
        border-radius: var(--sc-border-radius-medium);
        aspect-ratio: var(--sc-image-slideshow-thumb-aspect-ratio, 4 / 3);
      }

      &--is-active {
        img {
          outline: var(--sc-image-slideshow-thumb-active-outline, 2px solid var(--sc-focus-ring-color-primary, var(--sc-color-primary-500)));
          outline-offset: -2px;
        }
      }
  }
}
