From c8c39a4b23451921a7f9a488d369c9944fd6cd01 Mon Sep 17 00:00:00 2001
From: Leo <contact@leonguyen.com>
Date: Mon, 6 Oct 2025 17:17:34 -0500
Subject: [PATCH] Add hover arrow

---
 scss/elements/_hover-arrow.scss | 34 +++++++++++++++++++++++++++++++++
 scss/essence.scss               |  1 +
 2 files changed, 35 insertions(+)
 create mode 100644 scss/elements/_hover-arrow.scss

diff --git a/scss/elements/_hover-arrow.scss b/scss/elements/_hover-arrow.scss
new file mode 100644
index 0000000..e79ee67
--- /dev/null
+++ b/scss/elements/_hover-arrow.scss
@@ -0,0 +1,34 @@
+.hover-arrow {
+  --arrow-spacing: 5px;
+  --arrow-hover-transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  --arrow-hover-offset: translateX(3px);
+  --arrow-tip-transform: none;
+  --arrow-line-opacity: 0;
+
+  position: relative;
+  top: var(--arrow-top, -1px);
+  margin-left: var(--arrow-spacing);
+  stroke-width: 2px;
+  fill: none;
+  stroke: currentColor;
+
+  .hover-arrow-line {
+    opacity: var(--arrow-line-opacity);
+    transition: opacity var(--hoverTransition, var(--arrow-hover-transition));
+  }
+  .hover-arrow-tip {
+    transform: var(--arrow-tip-transform);
+    transition: transform var(--hoverTransition, var(--arrow-hover-transition));
+  }
+}
+
+@media (pointer: fine) {
+  a:hover, button:hover {
+    .hover-arrow-line {
+      --arrow-line-opacity: 1;
+    }
+    .hover-arrow-tip {
+      --arrow-tip-transform: var(--arrow-hover-offset);
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/essence.scss b/scss/essence.scss
index 72f6d5e..ccaa680 100644
--- a/scss/essence.scss
+++ b/scss/essence.scss
@@ -23,6 +23,7 @@
 @import 'elements/footer';
 @import 'elements/radio';
 @import 'elements/step-progress-bar';
+@import 'elements/hover-arrow';
 
 // Vendors
 @import 'vendors/prismjs';