refactor(Footer): update CSS Variables

Author: mrholek

docs/content/components/footer.md

@@ -38,10 +38,12 @@ Here's what you need to know before getting started with the aside menu:
 
 ## Customizing
 
-### SASS
+### CSS variables
 
-#### Variables
-{{< scss-docs name="footer-variables" file="scss/_variables.scss" >}}
+Sidebars use local CSS variables on `.footer` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="footer-css-vars" file="scss/_footer.scss" >}}
 
-### CSS Vars
-{{< css-vars-docs file="scss/_footer.scss" >}}
+### SASS variables
+
+{{< scss-docs name="footer-variables" file="scss/_variables.scss" >}}

scss/_footer.scss

@@ -1,13 +1,23 @@
 .footer {
+  // scss-docs-start footer-css-vars
+  --#{$prefix}footer-min-height: #{$footer-min-height};
+  --#{$prefix}footer-padding-x: #{$footer-padding-x};
+  --#{$prefix}footer-padding-y: #{$footer-padding-y};
+  --#{$prefix}footer-color: #{$footer-color};
+  --#{$prefix}footer-bg: #{$footer-bg};
+  --#{$prefix}footer-border-color: #{$footer-border-color};
+  --#{$prefix}footer-border: #{$footer-border-width} solid var(--#{$prefix}footer-border-color);
+  // scss-docs-end footer-css-vars
+
   display: flex;
   flex-wrap: wrap; // allow us to do the line break for collapsing content
   align-items: center;
   justify-content: space-between;
-  min-height: $footer-min-height;
-  padding: $footer-padding-y $footer-padding-x;
-  color: var(--#{$prefix}footer-color, $footer-color);
-  background: var(--#{$prefix}footer-bg, $footer-bg);
-  border-top: var(--#{$prefix}footer-border-width, $footer-border-width) solid var(--#{$prefix}footer-border-color, $footer-border-color);
+  min-height: var(--#{$prefix}footer-min-height);
+  padding: var(--#{$prefix}footer-padding-y) var(--#{$prefix}footer-padding-x);
+  color: var(--#{$prefix}footer-color);
+  background: var(--#{$prefix}footer-bg);
+  border-top: var(--#{$prefix}footer-border);
 }
 
 .footer-fixed {