commerce/site/components/product/ProductSlider/ProductSlider.module.css

.root {
  @apply relative w-full h-full select-none;
  overflow: hidden;
}

.slider {
  @apply relative h-full transition-opacity duration-150;
  opacity: 0;
}

.slider.show {
  opacity: 1;
}

.thumb {
  @apply overflow-hidden inline-block cursor-pointer h-full;
  width: 125px;
  width: calc(100% / 3);
}

.thumb.selected {
  @apply bg-white/30;
}

.thumb img {
  @apply h-full w-full object-cover transition duration-500;
}

.album {
  width: 100%;
  height: 100%;
  @apply bg-violet-dark;
  box-sizing: content-box;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  height: 125px;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.album::-webkit-scrollbar {
  display: none;
}

@screen md {
  .thumb:hover img {
    @apply scale-110;
  }
  .album {
    height: 182px;
  }
  .thumb {
    width: 235px;
  }
}