1 files changed, 23 insertions, 19 deletions

diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 13614bb..b92dd9e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,7 +7,7 @@
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
             ),
-            --logo: (
+            --icon: (
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
                 --hover: (
@@ -24,31 +24,34 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
-        font-weight:      500;
+        font-weight:      450;
         text-decoration:  none;
 
-        &:hover {
-            background-color: prop(--colors --hover --bg);
-            color:            prop(--colors --hover --fg);
+        @include element('icon') {
+            display:          flex;
+            position:         relative;
+            flex:             0 0 auto;
+            align-items:      center;
+            justify-content:  center;
+            width:            prop(--dims --outer, $global: true);
+            height:           100%;
+            transition:       background-color .2s, color .2s;
+            background-color: prop(--colors --icon --bg);
+            color:            prop(--colors --icon --fg);
         }
 
-        @include modifier('logo') {
-            background-color: prop(--colors --logo --bg);
-            color:            prop(--colors --logo --fg);
-
-            &:hover {
-                background-color: prop(--colors --logo --hover --bg);
-                color:            prop(--colors --logo --hover --fg);
+        @include modifier('icon-only') {
+            @include element('icon') {
+                background-color: prop(--colors --bg);
+                color:            prop(--colors --fg);
             }
         }
 
-        @include element('icon') {
-            display:         flex;
-            position:        relative;
-            align-items:     center;
-            justify-content: center;
-            width:           prop(--dims --outer, $global: true);
-            height:          100%;
+        &:hover {
+            @include multi('&', 'element' 'icon') {
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+            }
         }
 
         @include element('icon-symbol') {
@@ -62,6 +65,7 @@
             padding-right: prop(--dims --outer-spacing, $global: true);
             padding-left:  prop(--dims --outer-spacing, $global: true);
             line-height:   prop(--dims --outer, $global: true);
+            white-space:   nowrap;
         }
     }
 }