5 files changed, 10 insertions, 5 deletions

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;