1 files changed, 28 insertions, 28 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 0ced4c6..341ed3d 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -11,7 +11,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('lightbox') {
+    @include bem.object('lightbox') {
         box-sizing:            border-box;
         display:               grid;
         flex:                  1 1 auto;
@@ -24,7 +24,7 @@
         grid-template-columns: auto minmax(0, 1fr) auto;
         min-block-size:        0;
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             display:             flex;
             grid-area:           header;
             align-items:         flex-start;
@@ -32,7 +32,7 @@
             padding-inline:      props.get(vars.$pad);
         }
 
-        @include iro.bem-elem('img') {
+        @include bem.elem('img') {
             box-sizing:      border-box;
             display:         none;
             grid-area:       content;
@@ -41,39 +41,39 @@
             max-block-size:  100%;
             padding:         props.get(vars.$pad);
 
-            @include iro.bem-sibling-elem('img') {
-                @include iro.bem-modifier('default') {
+            @include bem.sibling-elem('img') {
+                @include bem.modifier('default') {
                     display: block;
 
-                    @include iro.bem-next-elem('nav-btn') {
+                    @include bem.next-elem('nav-btn') {
                         display: block;
     
-                        @include iro.bem-next-elem('nav-btn') {
+                        @include bem.next-elem('nav-btn') {
                             display: block;
                         }
                     }
                 }
             }
 
-            @include iro.bem-multi('&:target', 'is' 'visible') {
+            @include bem.multi('&:target', 'is' 'visible') {
                 display: block;
 
-                @include iro.bem-next-elem('nav-btn') {
+                @include bem.next-elem('nav-btn') {
                     display: block;
 
-                    @include iro.bem-next-elem('nav-btn') {
+                    @include bem.next-elem('nav-btn') {
                         display: block;
                     }
                 }
 
-                @include iro.bem-sibling-elem('img') {
-                    @include iro.bem-modifier('default') {
+                @include bem.sibling-elem('img') {
+                    @include bem.modifier('default') {
                         display: none;
 
-                        @include iro.bem-next-elem('nav-btn') {
+                        @include bem.next-elem('nav-btn') {
                             display: none;
         
-                            @include iro.bem-next-elem('nav-btn') {
+                            @include bem.next-elem('nav-btn') {
                                 display: none;
                             }
                         }
@@ -82,7 +82,7 @@
             }
         }
 
-        @include iro.bem-elem('thumbnails') {
+        @include bem.elem('thumbnails') {
             display:            flex;
             grid-area:          thumbnails;
             gap:                props.get(vars.$thumbnail--spacing);
@@ -91,7 +91,7 @@
             overflow:           auto;
         }
 
-        @include iro.bem-elem('footer') {
+        @include bem.elem('footer') {
             display:        flex;
             grid-area:      footer;
             align-items:    flex-start;
@@ -99,7 +99,7 @@
             padding-inline: props.get(vars.$pad);
         }
 
-        @include iro.bem-elem('thumbnail') {
+        @include bem.elem('thumbnail') {
             position:       relative;
             flex:           0 0 auto;
             inline-size:    props.get(vars.$thumbnail--size);
@@ -117,7 +117,7 @@
                 opacity:       1;
             }
 
-            @include iro.bem-is('selected') {
+            @include bem.is('selected') {
                 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
 
                 margin:        $focus-border-offset;
@@ -144,7 +144,7 @@
             }
         }
 
-        @include iro.bem-elem('thumbnail-img') {
+        @include bem.elem('thumbnail-img') {
             position:           absolute;
             inset-block-start:  0;
             inset-inline-start: 0;
@@ -155,21 +155,21 @@
             object-position:    center center;
         }
 
-        @include iro.bem-elem('thumbnail-icon') {
+        @include bem.elem('thumbnail-icon') {
             position:           absolute;
             inset-block-start:  50%;
             inset-inline-start: 50%;
             transform:          translate(-50%, -50%);
         }
 
-        @include iro.bem-elem('close-btn') {
+        @include bem.elem('close-btn') {
             flex:               0 0 auto;
             margin-block-start: calc(-.5 * props.get(vars.$pad));
             margin-inline:      auto calc(-.5 * props.get(vars.$pad));
             font-size:          props.get(vars.$close-button--font-size);
         }
 
-        @include iro.bem-elem('nav-btn') {
+        @include bem.elem('nav-btn') {
             position:   relative;
             display:    none;
             align-self: center;
@@ -186,7 +186,7 @@
                 transform:          translateY(-50%);
             }
 
-            @include iro.bem-modifier('prev') {
+            @include bem.modifier('prev') {
                 grid-area:     prev;
                 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
@@ -195,7 +195,7 @@
                 }
             }
     
-            @include iro.bem-modifier('next') {
+            @include bem.modifier('next') {
                 grid-area:     next;
                 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
@@ -206,10 +206,10 @@
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 color: props.get(vars.$static-themes, $theme, --text);
 
-                @include iro.bem-elem('thumbnail') {
+                @include bem.elem('thumbnail') {
                     outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
 
                     &:hover,
@@ -218,7 +218,7 @@
                         outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
                     }
         
-                    @include iro.bem-is('selected') {
+                    @include bem.is('selected') {
                         border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
                     }