Improved lightbox nav buttons

1 files changed, 25 insertions, 13 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 9a79ee8..6d83f01 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,12 +10,14 @@
             --thumbnail: (
                 --size:     fn.global-dim(--size --800),
                 --spacing:  fn.global-dim(--size --100),
-                --selected: 3px,
+                --selected: 3px, //fn.global-dim(--border-width --medium),
+            ),
+            --button: (
+                --font-size: fn.global-dim(--font-size --200),
             ),
             --nav-btn: (
-                --font-size: fn.global-dim(--font-size --400),
-                --pad-x:     fn.global-dim(--size --300),
-                --pad-y:     fn.global-dim(--size --300),
+                --width:  fn.global-dim(--size --3800),
+                --height: fn.global-dim(--size --3800),
             ),
         ),
     ), 'dims');
@@ -26,9 +28,8 @@
                 --size: fn.global-dim(--size --600),
             ),
             --nav-btn: (
-                --font-size: fn.global-dim(--font-size --300),
-                --pad-x:     fn.global-dim(--size --150),
-                --pad-y:     fn.global-dim(--size --150),
+                --width:  fn.global-dim(--size --2500),
+                --height: fn.global-dim(--size --2500),
             ),
         ),
     ), 'md');
@@ -47,6 +48,7 @@
         grid-template-columns: minmax(0, 1fr) auto;
         grid-template-areas:   'header close' 'content content' 'footer footer';
         gap:                   fn.dim(--spacing);
+        position:              relative;
         height:                100%;
 
         @include iro.bem-elem('footer') {
@@ -70,7 +72,7 @@
             max-width:  100%;
             max-height: 100%;
             margin:     auto;
-            padding:    0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x));
+            padding:    0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
         }
 
         @include iro.bem-elem('thumbnail') {
@@ -95,18 +97,28 @@
         }
 
         @include iro.bem-elem('close-btn') {
-            --icon-stroke-width: 2px;
-
             grid-area: close;
-            font-size: fn.global-dim(--font-size --150);
+            font-size: fn.dim(--button --font-size);
         }
 
         @include iro.bem-elem('prev-btn', 'next-btn') {
             position:  absolute;
             top:       50%;
-            padding:   fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x);
+            overflow:  visible;
             transform: translate(0, -50%);
-            font-size: fn.dim(--nav-btn --font-size);
+            font-size: fn.dim(--button --font-size);
+
+            &::after {
+                content:   '';
+                display:   block;
+                position:  absolute;
+                z-index:   -1;
+                top:       50%;
+                left:      50%;
+                width:     fn.dim(--nav-btn --width);
+                height:    fn.dim(--nav-btn --height);
+                transform: translate(-50%, -50%);
+            }
         }
 
         @include iro.bem-elem('prev-btn') {