Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/button/Button.scss

@@ -1,4 +1,5 @@
 @use 'state';
+@use '../../partials/dir';
 
 .btn-surface,
 .btn-primary,
@@ -18,27 +19,10 @@
   @include state.disabled;
 
   &--icon {
-    padding: {
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: var(--sp-extra-tight);
-        }
-      }
+      @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   }
 }

src/app/atoms/button/Toggle.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .toggle {
   width: 44px;
   height: 24px;
@@ -27,13 +29,13 @@
     background-color: var(--bg-positive);
 
     &::before {
-      background-color: white;
-      transform: translateX(calc(125%));
-      opacity: 1;
+      --ltr: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
+      @include dir.prop(transform, var(--ltr), var(--rtl));
 
-      [dir=rtl] & {
-        transform: translateX(calc(-125%));
-      }
+      transform: translateX(calc(125%));
+      background-color: white;
+      opacity: 1;
     }
   }
 }