1 files changed, 67 insertions, 0 deletions

diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
+@include namespace('outer-button') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --bg-hi, $global: true),
+            --bg: prop(--colors --fg-lo, $global: true),
+            --hover: (
+                --bg: prop(--colors --accent --color, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
+            ),
+            --logo: (
+                --fg: prop(--colors --fg-lo, $global: true),
+                --bg: prop(--colors --bg-hi, $global: true),
+                --hover: (
+                    --fg: prop(--colors --bg-hi, $global: true),
+                    --bg: prop(--colors --accent --color, $global: true),
+                )
+            )
+        )
+    ));
+
+    @include component(namespace()) {
+        display:          flex;
+        height:           prop(--dims --outer, $global: true);
+        transition:       background-color .2s, color .2s;
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-weight:      500;
+        text-decoration:  none;
+
+        &:hover {
+            background-color: prop(--colors --hover --bg);
+            color:            prop(--colors --hover --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 element('icon') {
+            display:         flex;
+            position:        relative;
+            align-items:     center;
+            justify-content: center;
+            width:           prop(--dims --outer, $global: true);
+            height:          100%;
+        }
+
+        @include element('icon-symbol') {
+            display: block;
+            width:   1.5em;
+            height:  1.5em;
+        }
+
+        @include element('content') {
+            height:        100%;
+            padding-right: prop(--dims --outer-spacing, $global: true);
+            padding-left:  prop(--dims --outer-spacing, $global: true);
+            line-height:   prop(--dims --outer, $global: true);
+        }
+    }
+}