From fa19ee5e91b001cf200352a46e0d1449ae0f6a3c Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Fri, 20 Jun 2025 15:08:46 +0200
Subject: [PATCH] refactor: :recycle: use custom property for gradient
 direction

---
 src/components/ref-gallery.webc | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

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>