1 files changed, 13 insertions, 11 deletions

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')