Simplified buttons

1 files changed, 33 insertions, 47 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f93f342..15804f1 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,10 +2,24 @@
 @use '../functions' as fn;
 
 @mixin button-variant($variant) {
-    border-color:     fn.color(--#{$variant} --bg);
-    background-color: fn.color(--#{$variant} --bg);
-    box-shadow:       fn.color(--#{$variant} --shadow);
-    color:            fn.color(--#{$variant} --label);
+    &:link,
+    &:visited,
+    &:enabled {
+        border-color:     fn.color(--#{$variant} --bg);
+        background-color: fn.color(--#{$variant} --bg);
+        box-shadow:       fn.color(--#{$variant} --shadow);
+        color:            fn.color(--#{$variant} --label);
+    }
+    
+    @include iro.bem-modifier('outline') {
+        &:link,
+        &:visited,
+        &:enabled {
+            background-color: transparent;
+            box-shadow:       none;
+            color:            fn.color(--#{$variant} --outline-label);
+        }
+    }
 
     &:link,
     &:visited,
@@ -24,12 +38,6 @@
             color:            fn.color(--#{$variant} --active --label);
         }
     }
-
-    @include iro.bem-modifier('outline') {
-        background-color: transparent;
-        box-shadow:       none;
-        color:            fn.color(--#{$variant} --outline-label);
-    }
 }
 
 @include iro.props-namespace('button') {
@@ -111,24 +119,26 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:         inline-block;
-        padding:         fn.dim(--pad-y) fn.dim(--pad-x);
-        border:          2px solid transparent;
-        border-radius:   fn.dim(--rounding);
-        font-weight:     500;
-        line-height:     1;
-        text-align:      center;
-        text-decoration: none;
+        display:          inline-block;
+        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        border:           2px solid transparent;
+        border-radius:    fn.dim(--rounding);
+        border-color:     fn.color(--any --disabled --bg);
+        background-color: fn.color(--any --disabled --bg);
+        box-shadow:       fn.color(--any --disabled --shadow);
+        color:            fn.color(--any --disabled --label);
+        font-weight:      500;
+        line-height:      1;
+        text-align:       center;
+        text-decoration:  none;
     
         @include iro.bem-modifier('block') {
             display: block;
         }
     
-        @include iro.bem-modifier('native') {
-            @include iro.bem-modifier('block') {
-                box-sizing: border-box;
-                width:      100%;
-            }
+        @include iro.bem-modifier('outline') {
+            background-color: transparent;
+            box-shadow:       none;
         }
     
         @include button-variant('secondary');
@@ -147,29 +157,5 @@
                 color:            fn.color(--any --key-focus --label);
             }
         }
-    
-        @include iro.bem-is('disabled') {
-            border-color:     fn.color(--any --disabled --bg);
-            background-color: fn.color(--any --disabled --bg);
-            box-shadow:       fn.color(--any --disabled --shadow);
-            color:            fn.color(--any --disabled --label);
-    
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:active {
-                    border-color:     fn.color(--any --disabled --bg);
-                    background-color: fn.color(--any --disabled --bg);
-                    box-shadow:       fn.color(--any --disabled --shadow);
-                    color:            fn.color(--any --disabled --label);
-                }
-            }
-    
-            @include iro.bem-modifier('outline') {
-                background-color: transparent;
-                box-shadow:       none;
-            }
-        }
     }
 }