1 files changed, 15 insertions, 30 deletions

diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 13550eb..f539da5 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,39 +1,24 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@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()) {
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('popover') {
         position:           absolute;
         inset-block-start:  0;
         inset-inline-start: 0;
-        z-index:            fn.dim(--z-index);
-        padding-block:      fn.dim(--pad-b);
-        padding-inline:     fn.dim(--pad-i);
-        background-color:   fn.color(--bg);
-        filter:             fn.color(--filter);
-        border:             fn.dim(--border) solid fn.color(--border);
-        border-radius:      fn.dim(--rounding);
+        z-index:            props.get(vars.$z-index);
+        padding-block:      props.get(vars.$pad-b);
+        padding-inline:     props.get(vars.$pad-i);
+        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));
 
         @include iro.bem-modifier('up-left') {