1 files changed, 92 insertions, 25 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 4902958..48470c0 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,16 +9,28 @@ $static-themes: 'black' 'white' !default;
     @include iro.props-store((
         --dims: (
             --pad: fn.global-dim(--size --150),
+
             --thumbnail: (
                 --size:      fn.global-dim(--size --700),
                 --rounding:  fn.global-dim(--rounding),
                 --spacing:   fn.global-dim(--size --100),
-                --idle:      fn.global-dim(--border --thin),
-                --selected:  fn.global-dim(--border --medium),
+                --border:    fn.global-dim(--border --thin),
+                
+                --selected: (
+                    --border: fn.global-dim(--border --medium),
+                ),
+
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
             ),
+
             --close-button: (
                 --font-size: fn.global-dim(--font-size --200),
             ),
+
             --nav-button: (
                 --width:     fn.global-dim(--size --2000),
                 --height:    fn.global-dim(--size --3800),
@@ -27,8 +39,20 @@ $static-themes: 'black' 'white' !default;
         ),
         --colors: (
             --thumbnail: (
-                --idle:     fn.global-color(--border-strong),
-                --selected: fn.global-color(--heading),
+                --border: fn.global-color(--border-strong),
+                
+                --hover: (
+                    --border: fn.global-color(--text-mute-more),
+                ),
+                
+                --selected: (
+                    --border: fn.global-color(--heading),
+                ),
+
+                --key-focus: (
+                    --border:  fn.global-color(--focus --border),
+                    --outline: fn.global-color(--focus --outline),
+                ),
             ),
         ),
     ));
@@ -37,10 +61,22 @@ $static-themes: 'black' 'white' !default;
         @include iro.props-store((
             --colors: (
                 --static-#{$theme}: (
-                    --text:         fn.global-color(--white-transparent --800),
+                    --text: fn.global-color(--white-transparent --800),
                     --thumbnail: (
-                        --idle:     fn.global-color(--white-transparent --400),
-                        --selected: fn.global-color(--white-transparent --900),
+                        --border: fn.global-color(--white-transparent --400),
+                
+                        --hover: (
+                            --border: fn.global-color(--white-transparent --500),
+                        ),
+                        
+                        --selected: (
+                            --border: fn.global-color(--white-transparent --900),
+                        ),
+
+                        --key-focus: (
+                            --border:  fn.global-color(--#{$theme}-transparent --900),
+                            --outline: fn.global-color(--#{$theme}-transparent --300),
+                        ),
                     ),
                 )
             )
@@ -131,12 +167,12 @@ $static-themes: 'black' 'white' !default;
         }
 
         @include iro.bem-elem('thumbnails') {
-            grid-area:      thumbnails;
-            display:        flex;
-            gap:            fn.dim(--thumbnail --spacing);
-            padding-block:  fn.dim(--thumbnail --selected) fn.dim(--pad);
-            padding-inline: fn.dim(--pad);
-            overflow:       auto;
+            grid-area:          thumbnails;
+            display:            flex;
+            gap:                fn.dim(--thumbnail --spacing);
+            padding:            fn.dim(--pad);
+            margin-block-start: calc(-1 * fn.dim(--pad));
+            overflow:           auto;
         }
 
         @include iro.bem-elem('footer') {
@@ -148,23 +184,42 @@ $static-themes: 'black' 'white' !default;
         }
 
         @include iro.bem-elem('thumbnail') {
-            position:      relative;
-            flex:          0 0 auto;
-            inline-size:   fn.dim(--thumbnail --size);
-            block-size:    fn.dim(--thumbnail --size);
-            overflow:      hidden;
-            border-radius: fn.dim(--thumbnail --rounding);
-            outline:       fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
+            position:       relative;
+            flex:           0 0 auto;
+            inline-size:    fn.dim(--thumbnail --size);
+            block-size:     fn.dim(--thumbnail --size);
+            overflow:       hidden;
+            border-radius:  fn.dim(--thumbnail --rounding);
+            outline:        fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
+            outline-offset: calc(-1 * fn.dim(--thumbnail --border));
             opacity:       .75;
 
             &:hover,
+            &:active,
             &:focus-visible {
-                opacity: 1;
+                outline-color: fn.color(--thumbnail --hover --border);
+                opacity:       1;
             }
 
             @include iro.bem-is('selected') {
-                outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected);
-                opacity: 1;
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
+
+                margin:        $focus-border-offset;
+                border:        fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
+                border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:       none;
+                opacity:       1;
+            }
+
+            &:focus-visible {
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
+
+                margin:         $focus-border-offset;
+                border:         fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
+                border-radius:  calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:        fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
+                outline-offset: 0;
+                box-shadow:     0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
             }
         }
 
@@ -234,10 +289,22 @@ $static-themes: 'black' 'white' !default;
                 color: fn.color(--static-#{$theme} --text);
 
                 @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --idle);
+                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
+                    }
         
                     @include iro.bem-is('selected') {
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --selected);
+                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
+                    }
+
+                    &:focus-visible {
+                        border-color:  transparent;
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
+                        box-shadow:    0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline);
                     }
                 }
             }