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

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

.slider {
  @apply flex-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;
  }
}