From 943ee062fe2c0344165e28f4d612176878159133 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 21 Jul 2025 16:03:52 +0200
Subject: Consolidating button, action-button and badge; change design to have
 some 3D components

---
 src/objects/_action-button.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/objects/_action-button.scss')

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 1dd4b84..7863f50 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -30,6 +30,12 @@
         color:            props.get($theme, list.join($key, --label-color)...);
         background-color: props.get($theme, list.join($key, --bg-color)...);
         border-color:     props.get($theme, list.join($key, --border-color)...);
+        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)...);
 
         &:hover,
         &:focus-visible {
@@ -42,6 +48,7 @@
             color:            props.get($theme, list.join($key, --active --label-color)...);
             background-color: props.get($theme, list.join($key, --active --bg-color)...);
             border-color:     props.get($theme, list.join($key, --active --border-color)...);
+            box-shadow:       none;
         }
     }
 
@@ -56,6 +63,7 @@
             color:            props.get($theme, list.join($key, --quiet --label-color)...);
             background-color: transparent;
             border-color:     transparent;
+            box-shadow:       none;
 
             &:hover,
             &:focus-visible {
@@ -72,7 +80,7 @@
         }
     }
 
-    @include bem.is('selected') {
+    @include bem.is('selected', 'badge') {
         color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
         border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
@@ -98,6 +106,12 @@
             }
         }
     }
+
+    @include bem.is('badge') {
+        color:            props.get($theme, list.join($key, --selected --label-color)...);
+        background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --selected --border-color)...);
+    }
 }
 
 @mixin styles {
-- 
cgit v1.3.1