Add hover arrow

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);
+    }
+  }
+}

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';