drop-shadow for lightbox arrows

images/icons/v3/chevron/chevron-left-white.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.599 3.651a.73.73 0 0 0-1.031 0L5.734 9.484a.73.73 0 0 0 0 1.032l5.834 5.833a.73.73 0 1 0 1.03-1.031L7.282 10 12.6 4.682a.73.73 0 0 0 0-1.03Z" fill="#fff"/></svg>

images/icons/v3/chevron/chevron-right-white.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.401 3.651a.73.73 0 0 1 1.031 0l5.834 5.833a.73.73 0 0 1 0 1.032l-5.834 5.833a.73.73 0 1 1-1.03-1.031L12.718 10 7.4 4.682a.73.73 0 0 1 0-1.03Z" fill="#fff"/></svg>

stylesheets/components/Lightbox.scss

@@ -276,12 +276,6 @@
       width: 100%;
     }
 
-    &:hover {
-      &::before {
-        background: $color-white;
-      }
-    }
-
     &:focus {
       outline: 4px solid $color-ultramarine;
     }
@@ -327,6 +321,10 @@
       &::before {
         width: 32px;
         height: 32px;
+        -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
+        content: '';
+        display: block;
+        background-size: 100%;
       }
 
       &:hover {
@@ -351,10 +349,7 @@
       padding-inline-start: 16px;
 
       &::before {
-        @include color-svg(
+        background-image: url('../images/icons/v3/chevron/chevron-left-white.svg');
-          '../images/icons/v3/chevron/chevron-left.svg',
-          $color-gray-05
-        );
       }
     }
 
@@ -363,10 +358,7 @@
       padding-inline-end: 16px;
 
       &::before {
-        @include color-svg(
+        background-image: url('../images/icons/v3/chevron/chevron-right-white.svg');
-          '../images/icons/v3/chevron/chevron-right.svg',
-          $color-gray-05
-        );
       }
     }
   }