Add hover arrow

scss/_variables.scss

@@ -5,3 +5,5 @@ $success-50:   hsl(134, 100%, 93%) !default;
 $info-50:      hsl(215, 100%, 97%) !default;
 $warning-50:   hsl(50, 100%, 96%) !default;
 $danger-50:    hsl(350, 100%, 96%) !default;
+
+$secondary-25: hsl(200, 26%, 96%) !default;

scss/bootstrap/_navbar.scss

@@ -1,9 +1,18 @@
-.navbar {
+.essence-navbar.navbar {
   z-index: 1040;
   background-image: none;
 
   .nav-link {
+    border-radius: 0.5rem;
     white-space: nowrap;
+
+    &:hover {
+      @include media-breakpoint-up(md) {
+        background-color: $secondary-25;
+      }
+
+      color: black;
+    }
   }
 
   &.navbar-dark {

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