Navbar: Better icon integration

1 files changed, 16 insertions, 12 deletions

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index af3406a..d245e2e 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -15,7 +15,11 @@
         display:    flex;
         block-size: props.get(vars.$block-size);
 
-        @include bem.elem('item-label') {
+        @include bem.elem('item-content-text') {
+            margin-inline: props.get(vars.$item--pad-i-label);
+        }
+
+        @include bem.elem('item-content') {
             position:        relative;
             padding-block:   props.get(vars.$item--pad-b);
             padding-inline:  props.get(vars.$item--pad-i);
@@ -60,13 +64,13 @@
                 &:focus-visible {
                     color: props.get(vars.$default-theme, --hover, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --hover, --bg-color);
                     }
                 }
 
                 &:focus-visible {
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         &::after {
                             display: block;
                         }
@@ -76,7 +80,7 @@
                 &:active {
                     color: props.get(vars.$default-theme, --active, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --active, --bg-color);
                     }
                 }
@@ -86,7 +90,7 @@
                 font-weight: bold;
                 color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
 
-                @include bem.elem('item-label') {
+                @include bem.elem('item-content') {
                     background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
                 }
 
@@ -95,7 +99,7 @@
                 &:enabled {
                     color: props.get(vars.$default-theme, --selected, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --selected, --bg-color);
                     }
 
@@ -103,7 +107,7 @@
                     &:focus-visible {
                         color: props.get(vars.$default-theme, --selected, --hover, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
                         }
                     }
@@ -111,7 +115,7 @@
                     &:active {
                         color: props.get(vars.$default-theme, --selected, --active, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
                         }
                     }
@@ -148,7 +152,7 @@
                 @include bem.is('selected') {
                     color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
                     }
 
@@ -157,7 +161,7 @@
                     &:enabled {
                         color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
                         }
 
@@ -165,7 +169,7 @@
                         &:focus-visible {
                             color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
 
-                            @include bem.elem('item-label') {
+                            @include bem.elem('item-content') {
                                 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
                             }
                         }
@@ -173,7 +177,7 @@
                         &:active {
                             color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
 
-                            @include bem.elem('item-label') {
+                            @include bem.elem('item-content') {
                                 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
                             }
                         }