From 0d37396339e4cc484dd822e38cd53f9616a91baa Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 14 Mar 2023 09:53:24 -0700
Subject: [PATCH] Make lightbox buttons smaller

---
 stylesheets/components/Lightbox.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 809c8c135f11..d3f6dc965a34 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -190,8 +190,11 @@
   &__nav-prev {
     position: absolute;
     top: 0;
+    display: flex;
+    flex-direction: column;
     width: 25%;
     height: 100%;
+    justify-content: center;
 
     // We need this so that the buttons stack above the container
     z-index: $z-index-above-base;
@@ -199,12 +202,12 @@
 
   &__nav-next {
     right: 0;
-    padding-right: 16px;
+    align-items: end;
   }
 
   &__nav-prev {
     left: 0;
-    padding-left: 16px;
+    align-items: start;
   }
 
   &__header {
@@ -326,6 +329,8 @@
     &--next {
       width: 100%;
       height: 100%;
+      max-width: 96px;
+      max-height: 224px;
       opacity: 0;
       transition: opacity 200ms ease-in-out;
 
@@ -357,6 +362,8 @@
 
     &--previous {
       justify-content: start;
+      padding-left: 16px;
+
       &::before {
         @include color-svg(
           '../images/icons/v2/arrow-left-32.svg',
@@ -367,6 +374,7 @@
 
     &--next {
       justify-content: end;
+      padding-right: 16px;
 
       &::before {
         @include color-svg(