Update

2 files changed, 20 insertions, 18 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 225cd29..fcea457 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -18,8 +18,8 @@
             width:        100%;
             height:       100%;
             margin-top:   -1px;
-            margin-right: prop(--dims --outer-spacing, $global: true);
-            margin-left:  prop(--dims --outer-spacing, $global: true);
+            margin-right: prop(--container --dims --pad-x, $global: true);
+            margin-left:  prop(--container --dims --pad-x, $global: true);
             border-top:   1px solid prop(--colors --border);
             color:        prop(--colors --fg);
             line-height:  prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 774281d..d636f7d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -11,6 +11,9 @@
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             )
+        ),
+        --dims: (
+            --pad-x: 1.7rem,
         )
     ));
 
@@ -31,6 +34,11 @@
             bottom:   0;
         }
 
+        @include modifier('inverted') {
+            background-color: prop(--colors --inverted --bg);
+            color:            prop(--colors --inverted --fg);
+        }
+
         @include element('icon') {
             display:          flex;
             position:         relative;
@@ -39,20 +47,6 @@
             justify-content:  center;
             width:            prop(--dims --outer, $global: true);
             height:           100%;
-            transition:       background-color .2s, color .2s;
-        }
-
-        @include modifier('inverted') {
-            background-color: prop(--colors --inverted --bg);
-            color:            prop(--colors --inverted --fg);
-        }
-        
-        &:link,
-        &:visited {
-            &:hover {
-                background-color: prop(--colors --hover --bg);
-                color:            prop(--colors --hover --fg);
-            }
         }
 
         @include element('icon-symbol') {
@@ -63,10 +57,18 @@
 
         @include element('content') {
             height:        100%;
-            padding-right: prop(--dims --outer-spacing, $global: true);
-            padding-left:  prop(--dims --outer-spacing, $global: true);
+            padding-right: prop(--dims --pad-x);
+            padding-left:  prop(--dims --pad-x);
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
         }
+        
+        &:link,
+        &:visited {
+            &:hover {
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+            }
+        }
     }
 }