diff --git a/src/components/ref-gallery.webc b/src/components/ref-gallery.webc
index c0a1121..4dc596e 100644
--- a/src/components/ref-gallery.webc
+++ b/src/components/ref-gallery.webc
@@ -121,6 +121,8 @@
   }
 
   :host :where(.prev, .next, .indicator-btn) {
+    --gradient-dir: to bottom right;
+
     position: relative;
 
     font-size: 1.25em;
@@ -128,7 +130,7 @@
     cursor: pointer;
 
     background: linear-gradient(
-      to bottom right,
+      var(--gradient-dir),
       var(--clr-box-gradient-start) 0%,
       var(--clr-box-gradient-end) 50%
     );
@@ -143,19 +145,17 @@
   }
 
   :host :where(.prev, .next, .indicator-btn):active::after {
-    background: linear-gradient(
-      to top left,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
+    --gradient-dir: to top left;
   }
 
   :host :where(.prev, .next, .indicator-btn)::after {
+    --gradient-dir: to bottom right;
+
     content: '';
     position: absolute;
     inset: var(--border-thin);
     background: linear-gradient(
-      to bottom right,
+      var(--gradient-dir),
       var(--clr-quick-info-bg-start) 0%,
       var(--clr-quick-info-bg-end) 50%
     );
@@ -255,10 +255,6 @@
   }
 
   :host .indicator-btn[aria-current='true']::after {
-    background: linear-gradient(
-      to top left,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
+    --gradient-dir: to top left;
   }
 </style>