1 files changed, 21 insertions, 16 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6b483ca..2cc63f5 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,30 +1,35 @@
-@include namespace('footer') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'iro-design/src/mixins' as mx;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('footer') {
+    @include iro.props-store((
         --colors: (
-            --fg:     prop(--colors --obj, $global: true),
-            --ground: prop(--colors --obj, $global: true),
+            --fg:     fn.global-color(--obj-lo),
+            --ground: fn.global-color(--obj),
         )
-    ));
+    ), 'colors');
+
+    @include iro.bem-component(iro.props-namespace()) {
+        @include mx.set-font(--mono);
 
-    @include component(namespace()) {
-        position:    sticky;
-        top:         100vh;
-        overflow:    hidden;
-        color:       prop(--colors --fg);
-        font-family: $font-fam--mono;
-        line-height: 1.4;
+        position: sticky;
+        top:      100vh;
+        overflow: hidden;
+        color:    fn.color(--fg);
 
         &::after {
-            content:     str-repeat('░', 400);
+            content:     fn2.str-repeat('░', 400);
             display:     block;
             margin-top:  2px;
             padding-top: 2px;
             overflow:    hidden;
-            border-top:  1px solid prop(--colors --ground);
-            color:       prop(--colors --ground);
+            border-top:  1px solid fn.color(--ground);
+            color:       fn.color(--ground);
         }
 
-        @include element('ascii') {
+        @include iro.bem-elem('ascii') {
             display:   inline-block;
             position:  relative;
             left:      50%;