From 2203e356a7b3a137a7b3c2c7ca4004b266ed9b3b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 8 Feb 2026 08:40:40 +0100
Subject: Update

---
 src/objects/_lightbox.scss      | 47 +++++++++++++++++++++++------------------
 src/objects/_lightbox.vars.scss | 15 +++++++++----
 2 files changed, 37 insertions(+), 25 deletions(-)

(limited to 'src')

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);
-				}
 			}
 		}
 	}
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 9f200b0..aea5023 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -8,23 +8,30 @@ $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
 $controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default;
 $controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !default;
 
+$controls--shadow-x:    props.def(--o-lightbox--controls--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$controls--shadow-y:    props.def(--o-lightbox--controls--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$controls--shadow-blur: props.def(--o-lightbox--controls--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$controls--shadow-grow: props.def(--o-lightbox--controls--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
+
 $thumbnail--width:           props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
 $thumbnail--spacing:         props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
 $thumbnail--active--width:   props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default;
 $thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default;
 
-$static-themes: props.def(--o-lightbox, (), 'color');
-
 $thumbnail--width--md:         props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default;
 $thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default;
 
+$controls--bg:           props.def(--o-lightbox--controls--bg, props.get(core.$transparent-colors, --black, --700), 'color') !default;
+$controls--shadow-color: props.def(--o-lightbox--controls--shadow-color, props.get(core.$transparent-colors, --black, --300), 'color') !default;
+
+$static-themes: props.def(--o-lightbox, (), 'color');
+
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
 	$lightbox-theme: --static-#{string.slice($theme, 3)};
 
 	$static-themes: props.merge($static-themes, (
 		$lightbox-theme: (
-			--text:        props.get(core.$transparent-colors, $theme, --text),
-			--controls-bg: props.get(core.$transparent-colors, $theme, --700),
+			--text: props.get(core.$transparent-colors, $theme, --text),
 		)
 	));
 }
-- 
cgit v1.2.3-70-g09d2