Update

2 files changed, 7 insertions, 3 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b78fb38..67619b2 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,6 +8,7 @@
 @forward 'lightbox.vars';
 @use 'lightbox.vars' as vars;
 
+@use 'button.vars' as button;
 @use 'backdrop.vars' as backdrop;
 @use 'thumbnail.vars' as thumbnail;
 
@@ -46,7 +47,6 @@
                         position:          absolute;
                         inset-block-start: 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:
@@ -59,10 +59,14 @@
 
                 @include bem.elem('info') {
                         inset-inline-start:  props.get(vars.$pad);
+                        padding:
+                                calc(props.get(vars.$controls--pad-b) + props.get(button.$pad-b))
+                                calc(props.get(vars.$controls--pad-i) + props.get(button.$pad-i));
                 }
 
                 @include bem.elem('controls') {
                         inset-inline-end:  props.get(vars.$pad);
+                        padding:           props.get(vars.$controls--pad-b) props.get(vars.$controls--pad-i);
                 }
 
                 @include bem.elem('img') {
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index aea5023..10e872c 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -5,8 +5,8 @@
 
 $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--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default;
+$controls--pad-b: props.def(--o-lightbox--controls--pad-b, 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;