Add highlighted state to button

1 files changed, 29 insertions, 0 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8fbec78..c4ecd87 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -109,6 +109,35 @@
         }
     }
 
+    @include bem.is('highlighted') {
+        &:link,
+        &:visited,
+        &:enabled {
+            &,
+            &:hover,
+            &:focus-visible {
+                border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
+            }
+
+            box-shadow:
+                0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
+                props.get(vars.$shadow-x)
+                props.get(vars.$shadow-y)
+                props.get(vars.$shadow-blur)
+                props.get(vars.$shadow-grow)
+                props.get($theme, list.join($key, --highlighted --shadow-color)...);
+
+            &:focus-visible {
+                box-shadow:
+                    props.get(vars.$shadow-x)
+                    props.get(vars.$shadow-y)
+                    props.get(vars.$shadow-blur)
+                    props.get(vars.$shadow-grow)
+                    props.get($theme, list.join($key, --shadow-color)...);
+            }
+        }
+    }
+
     @include bem.is('selected') {
         color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);