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

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

.leftControl {
  @apply left-6;
}

.rightControl {
  @apply right-6 rotate-180 transform;
}

.control {
  @apply opacity-0 transition-all 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 bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none;
}

.positionIndicatorActive {
  @apply bg-white hover:bg-white;
}
/* sx={{
  width: '10px',
  height: '10px',
  bg: currentSlide === idx ? 'primary' : 'gray',
  borderRadius: 'full',
  mx: 2,
  '&:focus': { outline: 'none' },
}} */