bigger clickable dots

components/product/ProductSlider/ProductSlider.module.css

@@ -32,11 +32,39 @@
 }
 
 .positionIndicator {
-  @apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none;
+  @apply rounded-full p-2;
+
+  /* :hover .dot {
+    @apply bg-hover-2;
+  }
+
+  :focus .dot {
+    @apply outline-none;
+  } */
 }
 
-.positionIndicatorActive {
+.dot {
-  @apply bg-white hover:bg-white;
+  @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;
 }
 /* sx={{
   width: '10px',

components/product/ProductSlider/ProductSlider.tsx

@@ -59,7 +59,9 @@ const ProductSlider: FC = ({ children }) => {
                 onClick={() => {
                   slider.moveToSlideRelative(idx)
                 }}
-              />
+              >
+                <div className={s.dot} />
+              </button>
             )
           })}
         </div>