.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; } .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; }