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

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

.leftControl,
.rightControl {
  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
}

.leftControl {
  @apply bg-cover left-10 md:left-6;
  background-image: url('public/cursor-left.png');
}

.rightControl {
  @apply bg-cover right-10 md:right-6;
  background-image: url('public/cursor-right.png');
}

.control {
  @apply opacity-0 transition duration-150;
}

.root:hover .control {
  @apply opacity-100;
}

.positionIndicatorsContainer {
  @apply hidden;
  @screen sm {
    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
  }
}

.positionIndicator {
  @apply rounded-full p-2;

  /* :hover .dot {
    @apply bg-hover-2;
  }

  :focus .dot {
    @apply outline-none;
  } */
}

.dot {
  @apply bg-hover-1 transition w-3 h-3 rounded-full;
}

.positionIndicator:hover .dot {
  @apply bg-hover-2;
}

.positionIndicator:focus {
  @apply outline-none;
}

.positionIndicator:focus .dot {
  @apply shadow-outline-blue;
}

.positionIndicatorActive .dot {
  @apply bg-white;
}

.positionIndicatorActive:hover .dot {
  @apply bg-white;
}