Update

4 files changed, 11 insertions, 37 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 62b5bfe..0ac49cc 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -206,6 +206,10 @@ $-sizes: (
         inset-block-end: 0;
     }
 
+    @include bem.utility('br-round') {
+        border-radius: props.get(vars.$rounding);
+    }
+
     @each $dir, $suffix in $-dirs {
         @include bem.utility('m#{$dir}-auto') {
             margin#{$suffix}: auto;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 4964b81..a581749 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -98,6 +98,10 @@
             grid-template-rows:    auto minmax(0, 1fr) auto auto;
             grid-template-columns: auto minmax(0, 1fr) auto;
 
+            @include bem.modifier('fullscreen') {
+                block-size: props.get(vars.$fullscreen--height);
+            }
+
             @include bem.elem('img') {
                 display:        none;
                 max-block-size: 100%;
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 7ea49b0..999776e 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -5,18 +5,9 @@
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
 
-$image--max-height: 80vh;
+$fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default;
 
-$thumbnail--size:         props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default;
-$thumbnail--rounding:     props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default;
-$thumbnail--spacing:      props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
-$thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default;
-
-$thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
-
-$thumbnail--key-focus--border-width:  props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
 
 $close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
 
@@ -24,16 +15,6 @@ $nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props
 $nav-button--block-size:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
 $nav-button--font-size:   props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
 
-$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
-
-$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-
-$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
-
-$thumbnail--key-focus--border-color:  props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
-
-$thumbnail--size--md:         props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default;
 $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
 $nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
 
@@ -45,22 +26,6 @@ $static-themes: props.def(--o-lightbox, (), 'color');
     $static-themes: props.merge($static-themes, (
         $lightbox-theme: (
             --text: props.get(core.$transparent-colors, $theme, --800),
-            --thumbnail: (
-                --border: props.get(core.$transparent-colors, $theme, --400),
-        
-                --hover: (
-                    --border: props.get(core.$transparent-colors, $theme, --500),
-                ),
-                
-                --selected: (
-                    --border: props.get(core.$transparent-colors, $theme, --900),
-                ),
-
-                --key-focus: (
-                    --border:  props.get(core.$transparent-colors, $theme, --900),
-                    --outline: props.get(core.$transparent-colors, $theme, --300),
-                ),
-            ),
         )
     ));
 }
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index d6e80ce..73a8cb0 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -14,6 +14,7 @@
     @include bem.object('thumbnail') {
         position:       relative;
         display:        block;
+        flex:           0 0 auto;
         inline-size:    props.get(vars.$size);
         block-size:     props.get(vars.$size);
         overflow:       hidden;