Update

1 files changed, 19 insertions, 4 deletions

diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 00c4ccb..d1da93c 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -1,8 +1,9 @@
 @include namespace('outer-button') {
     @include store((
         --colors: (
-            --fg: prop(--colors --bg-hi, $global: true),
-            --bg: prop(--colors --fg-lo, $global: true),
+            --fg:     prop(--colors --bg-hi, $global: true),
+            --bg:     prop(--colors --fg-lo, $global: true),
+            --border: rgba(#000, .1),
             --hover: (
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
@@ -23,6 +24,7 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
+        font-family:      $font-fam--large;
         font-size:        1rem;
         font-weight:      500;
         text-decoration:  none;
@@ -40,18 +42,25 @@
             justify-content:  center;
             width:            prop(--dims --outer, $global: true);
             height:           100%;
+
+            @include next-element('content') {
+                margin-left: -1px;
+                border-left: 1px solid prop(--colors --border);
+            }
         }
 
         @include element('icon-symbol') {
             display: block;
-            width:   1.5em;
-            height:  1.5em;
+            width:   1.35em;
+            height:  1.35em;
         }
 
         @include element('content') {
             height:        100%;
             padding-right: prop(--dims --pad-x);
             padding-left:  prop(--dims --pad-x);
+            transition:    border-color .2s;
+            font-size:     1 / 16 * 15em;
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
         }
@@ -61,6 +70,12 @@
             &:hover {
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
+
+                @include element('icon') {
+                    @include next-element('content') {
+                        border-left-color: transparent;
+                    }
+                }
             }
         }
     }