styles: make switch size responsive to font size

app/assets/stylesheets/_sn.scss

@@ -111,6 +111,10 @@
   line-height: 2.25rem;
 }
 
+.w-3.\5 {
+  width: 0.875rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -127,6 +131,14 @@
   height: 1px;
 }
 
+.h-3.\5 {
+  height: 0.875rem;
+}
+
+.h-4.\5 {
+  height: 1.125rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -206,10 +218,6 @@
   }
 }
 
-$switch-width: 35px;
-$switch-handle-size: 14px;
-$border-width: 2px;
-
 /** Lesser specificity will give priority to reach's styles */
 [data-reach-custom-checkbox-container].sn-switch {
   @extend .duration-150;
@@ -219,13 +227,14 @@ $border-width: 2px;
   @extend .bg-clip-padding;
   @extend .cursor-pointer;
   @extend .border-transparent;
-  width: $switch-width;
+  @extend .w-8;
-  height: 22px;
+  @extend .h-4.\5 ;
-  border-style: solid;
+  @extend .border-2;
-  border-width: $border-width;
+  @extend .border-solid;
   @extend .focus-within\:ring-info;
   @extend .focus-within\:outline-none;
   @extend .focus-within\:border-background;
+  box-sizing: content-box;
 }
 
 .sn-switch-handle {
@@ -238,15 +247,15 @@ $border-width: 2px;
   @extend .transition-transform;
   @extend .duration-150;
 
-  left: $border-width;
+  left: 2px;
-  width: $switch-handle-size;
+  @extend .w-3.\5 ;
-  height: $switch-handle-size;
+  @extend .h-3.\5 ;
   top: 50%;
   transform: translate(0px, -50%);
 
   &.sn-switch-handle-right {
     transform: translate(
-      $switch-width - $switch-handle-size - ($border-width * 4),
+      calc(2rem - 1.125rem),
       -50%
     );
   }