1 files changed, 23 insertions, 35 deletions

diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 5ad58ec..3fe6310 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,50 +1,38 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('popover') {
-    @include iro.props-store((
-        --dims: (
-            --z-index:   10000,
-            --pad-i:     0,
-            --pad-b:     fn.global-dim(--size --85),
-            --separator: fn.global-dim(--size --85),
-            --rounding:  fn.global-dim(--rounding),
-            --border:    fn.global-dim(--border --thin),
-        ),
-        --colors: (
-            --bg:        fn.global-color(--bg-l2),
-            --border:    fn.global-color(--border),
-            --filter:    drop-shadow(
-                fn.global-dim(--shadow --x)
-                fn.global-dim(--shadow --y)
-                fn.global-dim(--shadow --blur)
-                fn.global-color(--shadow)
-            ),
-        ),
-    ));
+@forward 'popover.vars';
+@use 'popover.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
-        position:           absolute;
-        z-index:            fn.dim(--z-index);
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('popover') {
+        position:           fixed;
         inset-block-start:  0;
         inset-inline-start: 0;
-        padding-block:      fn.dim(--pad-b);
-        padding-inline:     fn.dim(--pad-i);
+        z-index:            props.get(vars.$z-index);
+        padding-block:      props.get(vars.$pad-b);
+        padding-inline:     props.get(vars.$pad-i);
+        margin:             0;
+        color:              currentColor;
+        background-color:   props.get(vars.$bg-color);
+        filter:             props.get(vars.$filter);
+        border:             props.get(vars.$border-width) solid props.get(vars.$border-color);
+        border-radius:      props.get(vars.$rounding);
         transform:          translate(var(--x), var(--y));
-        border:             fn.dim(--border) solid fn.color(--border);
-        border-radius:      fn.dim(--rounding);
-        background-color:   fn.color(--bg);
-        filter:             fn.color(--filter);
 
-        @include iro.bem-modifier('up-left') {
+        @include bem.modifier('up-left') {
             transform: translate(var(--x), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('up-right') {
+        @include bem.modifier('up-right') {
             transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('down-right') {
+        @include bem.modifier('down-right') {
             transform: translate(calc(var(--x) - 100%), var(--y));
         }
     }