fix: switch-pill issue

Author: mrholek

scss/_switches.scss

@@ -254,36 +254,22 @@ $switch-icon-xs-width: 32px;
 $switch-icon-xs-height: 16px;
 $switch-icon-xs-font-size: 7px;
 
-.switch.switch-default {
+.switch-default {
   @include switch("default", $switch-width, $switch-height, $switch-font-size, $handle-margin);
 }
 
-.switch.switch-text {
+.switch-text {
   @include switch("text", $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
 }
 
-.switch.switch-icon {
+.switch-icon {
   @include switch("icon", $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
 }
 
-.switch.switch-3d {
+.switch-3d {
   @include switch("ddd", $switch-width, $switch-height, $switch-font-size, 0);
 }
 
-//pills style
-.switch-pill {
-  .switch-label,
-  .switch-handle {
-    border-radius: 50em;
-  }
-
-  .switch-label::before {
-    right: 2px;
-  }
-  .switch-label::after {
-    left: 2px;
-  }
-}
 
 @each $color, $value in $theme-colors {
   //normal style
@@ -299,3 +285,18 @@ $switch-icon-xs-font-size: 7px;
     @include switch-outline-alt-variant($value);
   }
 }
+
+//pills style
+.switch-pill {
+  .switch-label,
+  .switch-handle {
+    border-radius: 50em;
+  }
+
+  .switch-label::before {
+    right: 2px;
+  }
+  .switch-label::after {
+    left: 2px;
+  }
+}