Refactor icons

src/scss/components/_icons.scss

@@ -5,51 +5,49 @@
 
 [class*=" icon-"],
 [class^="icon-"] {
- vertical-align: top;
-}
-
-[class*=" icon-"]:before,
-[class*=" icon-"]:after,
-[class^="icon-"]:before,
-[class^="icon-"]:after {
   --icon-size: 1.5rem;
+ vertical-align: top;
+
+ &:before, &:after {
+  --m-interior: .5rem;
+  --m-exterior: -.125rem;
   background-color: currentColor;
   display: inline-block;
   flex: 0 0 auto;
-  height: 1.5rem;
-  height: var(--icon-size);
-  width: 1.5rem;
-  width: var(--icon-size);
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  block-size: var(--icon-size);
+  inline-size: var(--icon-size);
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   vertical-align: calc(.375em - .75rem);
   vertical-align: calc((.75em - var(--icon-size))*.5);
-}
-[class*=" icon-"]:before,
-[class^="icon-"]:before {
-  content: "";
+ }
+
+ &:before,
+ &.icon--right:after {
+   content: "";
+ }
+
+ &.icon--right:before {
+   content: none
+ }
 }
 
-.icon--right[class*=" icon-"]:before,
-.icon--right[class^="icon-"]:before {
-  content: none;
-}
 .icon--left:before {
-  margin-left: -.125rem;
-  margin-right: .5rem;
-}
-.icon--right:after {
-  content: "";
-  margin-left: .5rem;
-  margin-right: -.125rem;
+  margin-inline-start: var(--m-exterior);
+  margin-inline-end: var(--m-interior);
 }
 
-.icon--sm:before,
-.icon--sm:after {
+.icon--right:after {
+  margin-inline-start: var(--m-interior);
+  margin-inline-end: var(--m-exterior);
+}
+
+.icon--sm {
   --icon-size: 1rem;
 }
 
-.icon--lg:before,
-.icon--lg:after {
+.icon--lg {
   --icon-size: 2rem;
 }