From 47802e72bcaa2cd714c5eef519773cd26d346a2d Mon Sep 17 00:00:00 2001
From: Kostiantyn Huzenko <huzenko.c@gmail.com>
Date: Thu, 24 Oct 2024 14:56:05 -0400
Subject: [PATCH] feat(header): L3-4294 links underline fix (#401)

---
 src/components/Link/_link.scss                   | 5 +----
 src/patterns/UserManagement/_userManagement.scss | 2 +-
 src/scss/_type.scss                              | 7 ++++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
index 19365ad0..1ebd3a20 100644
--- a/src/components/Link/_link.scss
+++ b/src/components/Link/_link.scss
@@ -55,10 +55,7 @@
 
     &:hover,
     &:focus-visible {
-      @include underline(
-        $color: $dark-gray,
-        $padding: 0.5rem 0.625rem calc(0.5rem + 2px)
-      ); // 1 px so that the bottom border of the nav counts as part of the button
+      @include underline($color: $dark-gray); // 1 px so that the bottom border of the nav counts as part of the button
 
       color: $dark-gray;
     }
diff --git a/src/patterns/UserManagement/_userManagement.scss b/src/patterns/UserManagement/_userManagement.scss
index c4d0a019..b7e14342 100644
--- a/src/patterns/UserManagement/_userManagement.scss
+++ b/src/patterns/UserManagement/_userManagement.scss
@@ -31,7 +31,7 @@
     padding-bottom: $padding-xsm;
 
     &:hover {
-      @include underline($padding-xsm);
+      @include underline;
     }
 
     @include isHeaderMobile {
diff --git a/src/scss/_type.scss b/src/scss/_type.scss
index 9534a67b..3641e437 100644
--- a/src/scss/_type.scss
+++ b/src/scss/_type.scss
@@ -37,9 +37,10 @@
   font-family: Distinct, sans-serif;
 }
 
-@mixin underline($padding: 0, $width: 0.0625rem, $color: $pure-black) {
-  border-bottom: $width solid $color;
-  padding-bottom: $padding;
+@mixin underline($offset: $spacing-xsm, $thickness: 1px, $color: $pure-black) {
+  text-decoration: underline;
+  text-decoration-thickness: $thickness;
+  text-underline-offset: $offset;
 }
 
 @mixin hText(