Icon nav: Re-use action button for item

2 files changed, 3 insertions, 48 deletions

diff --git a/src/objects/_icon-nav.scss b/src/objects/_icon-nav.scss
index 25f4a57..afea9b9 100644
--- a/src/objects/_icon-nav.scss
+++ b/src/objects/_icon-nav.scss
@@ -5,62 +5,14 @@
     @include iro.props-store((
         --dims: (
             --spacing:  fn.global-dim(--size --100),
-            --item: (
-                --pad: fn.global-dim(--size --125),
-            )
         )
     ), 'dims');
 
-    @include iro.props-store((
-        --colors: (
-            --item: (
-                --hover: (
-                    --bg:    fn.global-color(--obj-hi),
-                    --label: fn.global-color(--fg-lo),
-                ),
-                --disabled: (
-                    --label: fn.global-color(--fg-hi3),
-                ),
-                --key-focus: (
-                    --border: fn.global-color(--focus --fill),
-                    --shadow: fn.global-color(--focus --shadow),
-                ),
-            ),
-        ),
-    ), 'colors');
-
     @include iro.bem-object(iro.props-namespace()) {
         display:     flex;
         align-items: center;
         gap:         fn.dim(--spacing);
 
-        @include iro.bem-elem('item') {
-            padding:       fn.dim(--item --pad);
-            border:        2px solid transparent;
-            border-radius: 10em;
-            color:         fn.color(--item --disabled --label);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                color: currentColor;
-
-                @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
-                    background-color: fn.color(--item --hover --bg);
-                    color:            fn.color(--item --hover --label);
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        border-color:     fn.color(--item --key-focus --border);
-                        background-color: fn.color(--item --hover --bg);
-                        box-shadow:       fn.color(--item --key-focus --shadow);
-                        color:            fn.color(--item --hover --label);
-                    }
-                }
-            }
-        }
-
         @include iro.bem-modifier('vertical') {
             flex-direction: column;
         }
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index 6f45bf6..f1c7d8a 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -19,6 +19,9 @@ mixin icon-nav-item(icon)
     -
         let classes = {
             'o-icon-nav__item': true,
+            'o-action-button': true,
+            'o-action-button--round': true,
+            'o-action-button--quiet': true,
             'is-selected':  attributes.selected,
         }
         if (attributes.class) {