diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss
index 4b3bfc3..5548b61 100644
--- a/src/assets/scss/components/_tabs.scss
+++ b/src/assets/scss/components/_tabs.scss
@@ -4,6 +4,9 @@
 $nav-tabs-color: var(--#{$prefix}body-color) !default;
 $nav-tabs-spacer: $spacer !default;
 $nav-tabs-disabled-opacity: 0.5 !default;
+
+$nav-underline-link-active-bg: $nav-tabs-link-active-bg !default;
+$nav-underline-link-active-border-color: currentcolor !default;
 /* @docs */
 
 /* @bootstrap docs */
@@ -61,19 +64,21 @@ $nav-tabs-disabled-opacity: 0.5 !default;
     }
 
     // style toggle / underline
-    &.nav-unterline,
+
+    &.nav-toggle {
+      @extend .nav-underline;
+    }
+
+    &.nav-underline,
     &.nav-toggle {
-      --#{$prefix}nav-underline-link-active-bg: #{$nav-tabs-link-active-bg};
-      --#{$prefix}nav-underline-border-color: #{$nav-tabs-border-color};
-      --#{$prefix}nav-underline-link-active-color: #{$nav-tabs-link-active-color};
-      --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+      --#{$prefix}nav-underline-link-active-bg: #{$nav-underline-link-active-bg};
+      --#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color};
 
-      .active {
+      .nav-link.active {
         background-color: var(--#{$prefix}nav-underline-link-active-bg);
-        border-color: var(--#{$prefix}nav-underline-border-color);
-        color: var(--#{$prefix}nav-underline-link-active-color);
-        border-bottom: $nav-underline-border-width solid
-          var(--#{$prefix}nav-underline-link-active-color);
+        border-bottom-color: var(
+          --#{$prefix}nav-underline-link-active-border-color
+        );
       }
     }