From 9ea56c45250eb7e025f4f480ffae72fdc60f53b9 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Thu, 23 Nov 2023 10:17:17 +0100
Subject: [PATCH 1/2] chore(mixins): add a mixin for styling hyperlinks

---
 src/style/mixins.scss | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 45cb4e6526..167d2a504c 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -275,3 +275,41 @@
         }
     }
 }
+
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+@mixin hyperlink(
+    $color: rgb(var(--color-blue-default)),
+    $color--hovered: rgb(var(--color-blue-default))
+) {
+    position: relative;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    color: $color;
+
+    &:before {
+        transition: opacity 0.2s ease, transform 0.3s ease-out;
+        content: '';
+        position: absolute;
+        inset: auto 0 0 0;
+        width: calc(100% - 0.5rem);
+        margin: auto;
+        height: 0.125rem;
+        border-radius: 1rem;
+
+        background-color: currentColor;
+        opacity: 0;
+        transform: scale(0.6);
+    }
+
+    &:hover {
+        color: $color--hovered;
+        &:before {
+            opacity: 0.3;
+            transform: scale(1);
+        }
+    }
+}

From b3f0f00fe222e83c821f643c1cd95272c48ac0db Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Thu, 23 Nov 2023 10:17:37 +0100
Subject: [PATCH 2/2] refactor(breadcrumbs): use mixin for styling hyperlinks

---
 src/components/breadcrumbs/breadcrumbs.scss | 25 +--------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss
index f05d59bf85..2790b4ca0c 100644
--- a/src/components/breadcrumbs/breadcrumbs.scss
+++ b/src/components/breadcrumbs/breadcrumbs.scss
@@ -74,30 +74,7 @@ ol {
 }
 
 a.step {
-    cursor: pointer;
-    transition: color 0.2s ease;
-    &:before {
-        transition: opacity 0.2s ease, transform 0.3s ease-out;
-        content: '';
-        position: absolute;
-        inset: auto 0 0 0;
-        width: calc(100% - 0.5rem);
-        margin: auto;
-        height: 0.125rem;
-        border-radius: 1rem;
-
-        background-color: currentColor;
-        opacity: 0;
-        transform: scale(0.6);
-    }
-
-    &:hover {
-        --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));
-        &:before {
-            opacity: 0.3;
-            transform: scale(1);
-        }
-    }
+    @include mixins.hyperlink($color: var(--limel-breadcrumbs-item-text-color));
 }
 
 button.step {