22 files changed, 44 insertions, 22 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 30b3dee..046cd16 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,6 +4,7 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'action-button.vars';
 @use 'action-button.vars' as vars;
@@ -100,7 +101,7 @@
 }
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('action-button') {
         position:         relative;
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index cb23d25..e4c2038 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -2,12 +2,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'alert.vars';
 @use 'alert.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('alert') {
         padding-block:    props.get(vars.$pad-b);
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 3fcd0f1..0f8e70f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'avatar.vars';
 @use 'avatar.vars' as vars;
@@ -21,7 +22,7 @@
 }
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('avatar') {
         position:       relative;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 5ba46f4..bf38079 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'backdrop.vars';
 @use 'backdrop.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('backdrop') {
         position:         fixed;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 8ad5607..1c28095 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -4,6 +4,7 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'badge.vars';
@@ -62,7 +63,7 @@
 }
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('badge') {
         position:         relative;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index e21ad51..9d5a8a1 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -4,6 +4,7 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'button.vars';
@@ -74,7 +75,7 @@
 }
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('button') {
         position:         relative;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 0f86a60..abc691b 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use 'avatar.vars' as avatar;
 
 @forward 'card.vars';
 @use 'card.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('card') {
         display:          block;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 78a9b1f..f0c6b85 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'checkbox.vars';
 @use 'checkbox.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('checkbox') {
         position:       relative;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index bcc4c90..49bc028 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,13 +3,14 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'divider.vars';
 @use 'divider.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('divider') {
         display:        flex;
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index ab03578..114c867 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use 'icon.vars' as icon;
 
 @forward 'emoji.vars';
 @use 'emoji.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('emoji') {
         position:       relative;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 58d8b13..8c275ee 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'field-label.vars';
 @use 'field-label.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('field-label') {
         display: block;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6ed0879..7efb23b 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'heading.vars';
 @use 'heading.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('heading') {
         display:               block;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 4a14d44..f80915e 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'icon.vars';
 @use 'icon.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('icon') {
         display:         inline;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 5bf3504..0ced4c6 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -3,12 +3,13 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'lightbox.vars';
 @use 'lightbox.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('lightbox') {
         box-sizing:            border-box;
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 0d651e3..0741929 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use 'icon.vars' as icon;
 
 @forward 'menu.vars';
 @use 'menu.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('menu') {
         display:        flex;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index bb58b69..406c143 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'popover.vars';
 @use 'popover.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('popover') {
         position:           absolute;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index bb04cae..c6e5a60 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'radio.vars';
 @use 'radio.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('radio') {
         position:       relative;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index c3baf12..c1e984f 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use 'icon.vars' as icon;
 
 @forward 'side-nav.vars';
 @use 'side-nav.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('side-nav') {
         display:        flex;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 14e3571..bf113a4 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -3,12 +3,13 @@
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'status-indicator.vars';
 @use 'status-indicator.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('status-indicator') {
         display:          inline-block;
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 4aaba98..f368229 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,13 +1,14 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 @use '../core.vars' as core;
 
 @forward 'switch.vars';
 @use 'switch.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('switch') {
         position:       relative;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index e3965ff..491db20 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,12 +1,13 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'table.vars';
 @use 'table.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('table') {
         border-spacing:  0;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 07997c3..b945866 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'text-field.vars';
 @use 'text-field.vars' as vars;
@@ -37,7 +38,7 @@
 }
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('text-field') {
         $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));