34 files changed, 67 insertions, 34 deletions

diff --git a/src/_props.scss b/src/_props.scss
index 8529cd8..9a1ecec 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -5,7 +5,7 @@
 @use 'include-media/dist/include-media' as media;
 @use 'iro-sass/src/props' as props;
 
-@mixin materialize($ref) {
+@mixin materialize-at-root($ref) {
     @if meta.type-of($ref) == 'map' {
         $ref: map.values($ref);
     }
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 3901cae..58d0986 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.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 'button-group.vars';
 @use 'button-group.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-layout('button-group') {
         display:   flex;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index b5d76a6..ecd767f 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -2,12 +2,13 @@
 @use 'include-media/dist/include-media' as media;
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/props';
+@use '../props' as *;
 
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-layout('card-list') {
         display:        flex;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 7c43bad..8b2ed20 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.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 'container.vars';
 @use 'container.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-layout('container') {
         @each $mod, $size in vars.$fixed-sizes {
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 2626722..0bb9d4a 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.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 'form.vars';
 @use 'form.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-layout('form') {
         display:        flex;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 8b8acd4..5658222 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.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 'media.vars';
 @use 'media.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-layout('media') {
         display:     flex;
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));
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index d29ab84..7406c89 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.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 'blockquotes.vars';
 @use 'blockquotes.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-scope('blockquotes') {
         blockquote {
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 989f8a2..5035879 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.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 'code.vars';
 @use 'code.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-scope('code') {
         code {
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 7f8185d..57c8099 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -2,13 +2,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 'implicit.vars';
 @use 'implicit.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     html {
         accent-color:    props.get(core.$theme, --accent, --600);
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 835bb7a..41472c7 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.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 'links.vars';
 @use 'links.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-scope('links') {
         :link,
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 52e5bd9..7f18df0 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.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 'lists.vars';
 @use 'lists.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-scope('lists') {
         ul,
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 54e3a12..08df871 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.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 '../objects/table.vars' as table;
 
 @forward 'tables.vars';
 @use 'tables.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
+    @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-scope('tables') {
         table {