New lightbox

9 files changed, 123 insertions, 223 deletions

diff --git a/package.json b/package.json
index a9d4cec..fd7ef0c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
         "sass": "^1.97.3",
         "stylelint": "^17.0.0",
         "stylelint-config-recess-order": "^7.6.0",
-        "stylelint-config-sass-guidelines": "^12.1.0",
+        "stylelint-config-sass-guidelines": "^13.0.0",
         "stylelint-order": "^7.0.1",
         "svg-sprite": "^2.0.4"
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aeb150e..d6e4c99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,8 +40,8 @@ importers:
         specifier: ^7.6.0
         version: 7.6.0(stylelint-order@7.0.1(stylelint@17.1.1))(stylelint@17.1.1)
       stylelint-config-sass-guidelines:
-        specifier: ^12.1.0
-        version: 12.1.0(postcss@8.5.6)(stylelint@17.1.1)
+        specifier: ^13.0.0
+        version: 13.0.0(postcss@8.5.6)(stylelint@17.1.1)
       stylelint-order:
         specifier: ^7.0.1
         version: 7.0.1(stylelint@17.1.1)
@@ -86,12 +86,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@csstools/css-parser-algorithms@3.0.1':
-    resolution: {integrity: sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^3.0.1
-
   '@csstools/css-parser-algorithms@4.0.0':
     resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
     engines: {node: '>=20.19.0'}
@@ -101,21 +95,10 @@ packages:
   '@csstools/css-syntax-patches-for-csstree@1.0.26':
     resolution: {integrity: sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==}
 
-  '@csstools/css-tokenizer@3.0.1':
-    resolution: {integrity: sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==}
-    engines: {node: '>=18'}
-
   '@csstools/css-tokenizer@4.0.0':
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
-  '@csstools/media-query-list-parser@3.0.1':
-    resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^3.0.1
-      '@csstools/css-tokenizer': ^3.0.1
-
   '@csstools/media-query-list-parser@5.0.0':
     resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
     engines: {node: '>=20.19.0'}
@@ -331,11 +314,11 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@stylistic/stylelint-plugin@3.1.1':
-    resolution: {integrity: sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==}
-    engines: {node: ^18.12 || >=20.9}
+  '@stylistic/stylelint-plugin@5.0.1':
+    resolution: {integrity: sha512-NaVwCNVZ2LyPA3TnUwvjO9c6P6VUjgRB8UP8SOW+cAOJBVqPPuOIDawsvvtql/LhkuR3JuTdGvr/RM3dUl8l2Q==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      stylelint: ^16.8.0
+      stylelint: ^17.0.0
 
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
@@ -584,10 +567,6 @@ packages:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -952,9 +931,6 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  known-css-properties@0.34.0:
-    resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==}
-
   known-css-properties@0.37.0:
     resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
@@ -994,12 +970,12 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdn-data@2.27.0:
+    resolution: {integrity: sha512-/pUmP9UebM48q5BTqZd0yPnDjyRGhITbKh8cwa6/ZwjuDu8xq+VzmugLF7QNxpdaqqNH3J5nnv3yc8oARv096A==}
+
   meow@14.0.0:
     resolution: {integrity: sha512-JhC3R1f6dbspVtmF3vKjAWz1EVIvwFrGGPLSdU6rK79xBwHWTuHoLnRX/t1/zHS1Ch1Y2UtIrih7DAHuH9JFJA==}
     engines: {node: '>=20'}
@@ -1106,10 +1082,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -1374,12 +1346,12 @@ packages:
       stylelint: ^16.18.0 || ^17.0.0
       stylelint-order: ^7.0.0
 
-  stylelint-config-sass-guidelines@12.1.0:
-    resolution: {integrity: sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==}
-    engines: {node: '>=18.12.0'}
+  stylelint-config-sass-guidelines@13.0.0:
+    resolution: {integrity: sha512-YJT0X8h0OqyEo7ys3EycV5CGWt2rrkEYE8sHSN6sFnrxbXvHiy4KJFHDOWfyb3eWR6wtYpM+yIyvR2Plc8+pCg==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4.21
-      stylelint: ^16.1.0
+      stylelint: ^17.1.0
 
   stylelint-order@7.0.1:
     resolution: {integrity: sha512-GWPei1zBVDDjxM+/BmcSCiOcHNd8rSqW6FUZtqQGlTRpD0Z5nSzspzWD8rtKif5KPdzUG68DApKEV/y/I9VbTw==}
@@ -1387,11 +1359,11 @@ packages:
     peerDependencies:
       stylelint: ^16.18.0 || ^17.0.0
 
-  stylelint-scss@6.7.0:
-    resolution: {integrity: sha512-RFIa2A+pVWS5wjNT+whtK7wsbZEWazyqesCuSaPbPlZ8lh2TujwVJSnCYJijg6ChZzwI8pZPRZS1L6A9aCbXDg==}
-    engines: {node: '>=18.12.0'}
+  stylelint-scss@7.0.0:
+    resolution: {integrity: sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      stylelint: ^16.0.2
+      stylelint: ^16.8.2 || ^17.0.0
 
   stylelint@17.1.1:
     resolution: {integrity: sha512-SBHVcLEcRF1M9OkD3oT0hT2PayDNLw2hd+aovmzfNQ2ys4Xd3oS9ZNizILWqhQvW802AqKN/vUTMwJqQYMBlWw==}
@@ -1589,25 +1561,14 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1)':
-    dependencies:
-      '@csstools/css-tokenizer': 3.0.1
-
   '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
   '@csstools/css-syntax-patches-for-csstree@1.0.26': {}
 
-  '@csstools/css-tokenizer@3.0.1': {}
-
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
-      '@csstools/css-tokenizer': 3.0.1
-
   '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
@@ -1761,13 +1722,13 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@stylistic/stylelint-plugin@3.1.1(stylelint@17.1.1)':
+  '@stylistic/stylelint-plugin@5.0.1(stylelint@17.1.1)':
     dependencies:
-      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
-      '@csstools/css-tokenizer': 3.0.1
-      '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)
-      is-plain-object: 5.0.0
-      postcss-selector-parser: 6.1.2
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
       style-search: 0.1.0
       stylelint: 17.1.1
@@ -2025,11 +1986,6 @@ snapshots:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
@@ -2347,8 +2303,6 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  known-css-properties@0.34.0: {}
-
   known-css-properties@0.37.0: {}
 
   kuler@2.0.0: {}
@@ -2380,10 +2334,10 @@ snapshots:
 
   mdn-data@2.0.14: {}
 
-  mdn-data@2.0.30: {}
-
   mdn-data@2.12.2: {}
 
+  mdn-data@2.27.0: {}
+
   meow@14.0.0: {}
 
   merge2@1.4.1: {}
@@ -2477,11 +2431,6 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
@@ -2801,13 +2750,13 @@ snapshots:
       stylelint: 17.1.1
       stylelint-order: 7.0.1(stylelint@17.1.1)
 
-  stylelint-config-sass-guidelines@12.1.0(postcss@8.5.6)(stylelint@17.1.1):
+  stylelint-config-sass-guidelines@13.0.0(postcss@8.5.6)(stylelint@17.1.1):
     dependencies:
-      '@stylistic/stylelint-plugin': 3.1.1(stylelint@17.1.1)
+      '@stylistic/stylelint-plugin': 5.0.1(stylelint@17.1.1)
       postcss: 8.5.6
       postcss-scss: 4.0.9(postcss@8.5.6)
       stylelint: 17.1.1
-      stylelint-scss: 6.7.0(stylelint@17.1.1)
+      stylelint-scss: 7.0.0(stylelint@17.1.1)
 
   stylelint-order@7.0.1(stylelint@17.1.1):
     dependencies:
@@ -2815,14 +2764,15 @@ snapshots:
       postcss-sorting: 9.1.0(postcss@8.5.6)
       stylelint: 17.1.1
 
-  stylelint-scss@6.7.0(stylelint@17.1.1):
+  stylelint-scss@7.0.0(stylelint@17.1.1):
     dependencies:
-      css-tree: 2.3.1
+      css-tree: 3.1.0
       is-plain-object: 5.0.0
-      known-css-properties: 0.34.0
+      known-css-properties: 0.37.0
+      mdn-data: 2.27.0
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.6
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
       stylelint: 17.1.1
 
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..0d5e111 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,89 @@
 @forward 'lightbox.vars';
 @use 'lightbox.vars' as vars;
 
+@use 'backdrop.vars' as backdrop;
+@use 'thumbnail.vars' as thumbnail;
+
 @mixin styles {
         @include materialize-at-root(meta.module-variables('vars'));
 
         @include bem.object('lightbox') {
-                flex:           1 1 auto;
-                min-block-size: 0;
-
-                @include bem.elem('header') {
-                        display:             flex;
-                        grid-area:           header;
-                        align-items:         flex-start;
-                        padding-block-start: props.get(vars.$pad);
-                        padding-inline:      props.get(vars.$pad);
-                }
+                position:         relative;
+                box-sizing:       border-box;
+                display:          flex;
+                flex:             1 1 auto;
+                flex-direction:   column;
+                align-items:      center;
+                justify-content:  center;
+                inline-size:      100%;
+                max-inline-size:  none;
+                block-size:       100%;
+                min-block-size:   0;
+                max-block-size:   none;
+                margin:           0;
+                background-color: transparent;
+                border:           0;
 
-                @include bem.elem('img') {
-                        box-sizing:      border-box;
-                        display:         block;
-                        grid-area:       content;
-                        place-self:      center;
-                        inline-size:     auto;
-                        max-inline-size: 100%;
-                        block-size:      auto;
-                        max-block-size:  props.get(vars.$image--max-height);
-                        padding:         props.get(vars.$pad);
-                        margin-inline:   auto;
-                        border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
+                &::backdrop {
+                        background-color: props.get(backdrop.$bg-color);
+                        backdrop-filter: blur(props.get(backdrop.$blur));
                 }
 
-                @include bem.elem('thumbnails') {
-                        display:            none;
-                        grid-area:          thumbnails;
-                        gap:                props.get(vars.$thumbnails--spacing);
-                        padding:            props.get(vars.$pad);
-                        margin-block-start: calc(-1 * props.get(vars.$pad));
-                        overflow:           auto;
+                &[open] {
+                        display: flex;
                 }
 
-                @include bem.elem('close-btn') {
-                        display:            none;
-                        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 bem.elem('controls') {
+                        position:          absolute;
+                        inset-block-start: props.get(vars.$pad);
+                        inset-inline-end:  props.get(vars.$pad);
+                        z-index:           20;
+                        padding:           props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
+                        border-radius:     10em;
                 }
 
-                @include bem.elem('nav-btn') {
-                        position:   relative;
-                        display:    none;
-                        align-self: center;
-                        overflow:   visible;
-                        font-size:  props.get(vars.$nav-button--font-size);
-
-                        &::before {
-                                position:           absolute;
-                                inset-block-start:  50%;
-                                display:            block;
-                                inline-size:        props.get(vars.$nav-button--inline-size);
-                                block-size:         props.get(vars.$nav-button--block-size);
-                                content:            '';
-                                transform:          translateY(-50%);
-                        }
-
-                        @include bem.modifier('prev') {
-                                grid-area:     prev;
-                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
-
-                                &::before {
-                                        inset-inline-start: 0;
-                                }
-                        }
-    
-                        @include bem.modifier('next') {
-                                grid-area:     next;
-                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
+                @include bem.elem('img') {
+                        position:        relative;
+                        z-index:         10;
+                        display:         none;
+                        flex:            1 1 auto;
+                        inline-size:     auto;
+                        max-inline-size: 100%;
+                        block-size:      auto;
+                        max-block-size:  100%;
+                        margin:          auto;
 
-                                &::before {
-                                        inset-inline-end: 0;
-                                }
+                        @include bem.multi('&:target', 'is' 'visible') {
+                                display: block;
                         }
                 }
 
-                @include bem.modifier('interactive') {
-                        display:               grid;
-                        grid-template-areas:
-                                'header     header     header'
-                                'prev       content    next'
-                                'thumbnails thumbnails thumbnails';
-                        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%;
-                                margin-inline:  0;
-
-                                @include bem.multi('&:target', 'is' 'visible') {
-                                        display: block;
-                                }
-                        }
-
-                        @include bem.elem('thumbnails') {
-                                display: flex;
-                        }
+                @include bem.elem('thumbnails') {
+                        display:                 flex;
+                        flex:            0 0 auto;
+                        gap:             props.get(vars.$thumbnail--spacing);
+                        justify-content: center;
+                        padding:         props.get(vars.$pad);
+                        overflow:        auto;
+                }
 
-                        @include bem.elem('close-btn') {
-                                display: block;
-                        }
+                @include bem.elem('thumbnail') {
+                        inline-size: props.get(vars.$thumbnail--width);
+                        transition:  inline-size .1s ease, margin-inline .1s ease;
 
-                        @include bem.elem('nav-btn') {
-                                display: block;
+                        @include bem.is('selected') {
+                                inline-size:  props.get(vars.$thumbnail--active--width);
+                                margin-inline: props.get(vars.$thumbnail--active--spacing);
                         }
                 }
 
                 @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 6d22aa8..9f200b0 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -4,30 +4,27 @@
 @use '../core.vars' as core;
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
-$fullscreen--height:  props.def(--o-lightbox--fullscreen--height, 100vh) !default;
 
-$image--max-height:    props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
-$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !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;
 
-$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
-
-$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
-$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;
-
-$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;
-
-$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !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;
+
 @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, --800),
+                        --text:        props.get(core.$transparent-colors, $theme, --text),
+                        --controls-bg: props.get(core.$transparent-colors, $theme, --700),
                 )
         ));
 }
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 60a98af..2ccb50b 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -21,7 +21,6 @@
                 outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
                 outline-offset: calc(-1 * props.get(vars.$border-width));
                 border-radius:  props.get(vars.$rounding);
-                opacity:       .75;
 
                 &:hover,
                 &:active,
@@ -30,16 +29,6 @@
                         opacity:       1;
                 }
 
-                @include bem.is('selected') {
-                        $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
-
-                        margin:        $focus-border-offset;
-                        outline:       none;
-                        border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
-                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                        opacity:       1;
-                }
-
                 @include bem.elem('image') {
                         position:           absolute;
                         inset-block-start:  0;
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index e49e52e..d2a38c0 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -3,7 +3,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
+$size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
 $rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
 $spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 53b01af..257318e 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -35,6 +35,7 @@
 @include iro.o-figure--styles;
 @include iro.o-field-label--styles;
 @include iro.o-heading--styles;
+@include iro.o-thumbnail--styles;
 @include iro.o-lightbox--styles;
 @include iro.o-menu--styles;
 @include iro.o-navbar--styles;
@@ -47,7 +48,6 @@
 @include iro.o-table--styles;
 @include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
-@include iro.o-thumbnail--styles;
 
 @include iro.utils--styles;
 
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 2d520b5..0fddad1 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -11,26 +11,28 @@ mixin lightbox(images)
         }
         let thumbnailClasses = {
             'o-thumbnail': true,
+            'o-lightbox__thumbnail': true,
         }
+        let inverseTheme = {
+            "static-black": "static-white",
+            "static-white": "static-black",
+        }[attributes.theme]
 
         if (attributes.theme) {
             classes[`o-lightbox--${attributes.theme}`] = true;
-            linksClasses[`s-links--${attributes.theme}`] = true;
-            thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
+            linksClasses[`s-links--${inverseTheme}`] = true;
+            thumbnailClasses[`o-thumbnail--${inverseTheme}`] = true;
         }
 
     div(class=classes)
-        header.o-lightbox__header
-            div(class=linksClasses)
-                block
-            +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
-
         each img, i in images
             img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        if images.length > 1
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+        .o-lightbox__controls
+            if images.length > 1
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +button(theme=inverseTheme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
 
         .o-lightbox__thumbnails
             each img, i in images
@@ -38,7 +40,7 @@ mixin lightbox(images)
                     let classes = { 'is-selected': i === 0 }
                     Object.assign(classes, thumbnailClasses)
 
-                a.o-thumbnail(class=classes href='#image-' + i)
+                a(class=classes href='#image-' + i)
                     img.o-thumbnail__image(src=img)
             button(class=thumbnailClasses)
                 +icon('volume-2')(class='o-thumbnail__icon')
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 7e366c0..c4b9878 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -14,7 +14,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -27,7 +27,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png'])(theme='static-white')
+                +lightbox(['avatar.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -39,7 +39,7 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         +backdrop(maxHeight=true)
-            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black' interactive=true)
                 = "Let's try multiple links! "
                 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                     = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"