1 files changed, 26 insertions, 21 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 5ff6d93..7a3a795 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -15,20 +15,22 @@
         @include materialize-at-root(meta.module-variables('vars'));
 
         @include bem.object('lightbox') {
-                box-sizing:       border-box;
-                display:          none;
-                flex:             1 1 auto;
-                flex-direction:   column;
-                justify-content:  flex-end;
-                inline-size:      100%;
-                max-inline-size:  none;
-                block-size:       100%;
-                min-block-size:   0;
-                max-block-size:   none;
-                padding:          0;
-                margin:           0;
-                background-color: transparent;
-                border:           0;
+                box-sizing:            border-box;
+                display:               none;
+                flex:                  1 1 auto;
+                grid-template-areas:   'image' 'thumbnails';
+                grid-template-rows:    1fr auto;
+                grid-template-columns: 1fr;
+                justify-items:         center;
+                inline-size:           100%;
+                max-inline-size:       none;
+                block-size:            100%;
+                min-block-size:        0;
+                max-block-size:        none;
+                padding:               0;
+                margin:                0;
+                background-color:      transparent;
+                border:                0;
 
                 &::backdrop {
                         background-color: props.get(backdrop.$bg-color);
@@ -36,7 +38,7 @@
                 }
 
                 &[open] {
-                        display: flex;
+                        display: grid;
                 }
 
                 @include bem.elem('controls') {
@@ -45,14 +47,21 @@
                         inset-inline-end:  props.get(vars.$pad);
                         z-index:           20;
                         padding:           props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
+                        background-color:  props.get(vars.$controls--bg);
                         border-radius:     10em;
+                        box-shadow:
+                                props.get(vars.$controls--shadow-x)
+                                props.get(vars.$controls--shadow-y)
+                                props.get(vars.$controls--shadow-blur)
+                                props.get(vars.$controls--shadow-grow)
+                                props.get(vars.$controls--shadow-color);
                 }
 
                 @include bem.elem('img') {
                         position:        relative;
                         z-index:         10;
                         display:         block;
-                        flex:            1 1 auto;
+                        grid-area:       image;
                         inline-size:     auto;
                         min-inline-size: 0;
                         max-inline-size: 100%;
@@ -82,7 +91,7 @@
 
                 @include bem.elem('thumbnails') {
                         display:                 flex;
-                        flex:            0 0 auto;
+                        grid-area:       thumbnails;
                         gap:             props.get(vars.$thumbnail--spacing);
                         justify-content: center;
                         padding:         props.get(vars.$pad);
@@ -102,10 +111,6 @@
                 @each $theme in map.keys(props.get(vars.$static-themes)) {
                         @include bem.modifier(string.slice($theme, 3)) {
                                 color: props.get(vars.$static-themes, $theme, --text);
-
-                                @include bem.elem('controls') {
-                                        background-color: props.get(vars.$static-themes, $theme, --controls-bg);
-                                }
                         }
                 }
         }