commerce/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;
}

.control {
  @apply bg-violet absolute bottom-10 right-10 flex flex-row
  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
  height: 48px;
}

.leftControl,
.rightControl {
  @apply px-9 cursor-pointer;
  transition: background-color 0.2s ease;
}

.leftControl:hover,
.rightControl:hover {
  background-color: var(--violet-dark);
}

.leftControl:focus,
.rightControl:focus {
  @apply outline-none;
}

.rightControl {
  @apply border-l border-accent-0;
}

.leftControl {
  margin-right: -1px;
}

.thumb {
  @apply transition-transform transition-colors
  ease-linear duration-75 overflow-hidden inline-block
  cursor-pointer h-full;
  width: 125px;
  width: calc(100% / 3);
}

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

.thumb img {
  height: 85% !important;
}

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

@screen md {
  .thumb:hover {
    transform: scale(1.02);
    background-color: rgba(255, 255, 255, 0.08);
  }

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

  .album {
    height: 182px;
  }
  .thumb {
    width: 235px;
  }
}