From d16e6ed3e50345021f12002c8ff386426896f8e3 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Thu, 22 Jun 2023 10:27:10 +0300
Subject: [PATCH] fix: fixed button outline

---
 src/Nav/Nav.scss         |  4 ++--
 src/Nav/_mixins.scss     | 16 ++++++++++------
 src/Tabs/Tabs.scss       | 11 ++++++-----
 src/Tabs/_variables.scss |  1 +
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss
index ac4ade4a76b..629f527922c 100644
--- a/src/Nav/Nav.scss
+++ b/src/Nav/Nav.scss
@@ -43,7 +43,7 @@
     border: $nav-pills-link-border-width solid $nav-pills-link-border-color;
 
     &:focus {
-      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
     }
 
     &:hover {
@@ -58,7 +58,7 @@
       border-color: $nav-pills-link-active-border-color;
 
       &:focus {
-        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
       }
     }
   }
diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss
index 9e896eb6331..7c3900e461b 100644
--- a/src/Nav/_mixins.scss
+++ b/src/Nav/_mixins.scss
@@ -1,4 +1,8 @@
-@mixin nav-tabs-link-focus($border-color) {
+@mixin nav-tabs-link-focus(
+  $border-color,
+  $radius: $nav-tabs-border-radius,
+  $distance: $nav-tabs-link-distance-to-border
+) {
   position: relative;
   outline: 0;
   z-index: map-get($map: $indexes, $key: 1);
@@ -6,11 +10,11 @@
   &::before {
     content: "";
     position: absolute;
-    top: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    right: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    bottom: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    left: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    top: calc(#{$distance} * -1);
+    right: calc(#{$distance} * -1);
+    bottom: calc(#{$distance} * -1);
+    left: calc(#{$distance} * -1);
     border: solid $nav-tabs-border-width $border-color;
-    border-radius: $nav-tabs-border-radius;
+    border-radius: $radius;
   }
 }
diff --git a/src/Tabs/Tabs.scss b/src/Tabs/Tabs.scss
index dd2a90223f7..bb3bcc5d927 100644
--- a/src/Tabs/Tabs.scss
+++ b/src/Tabs/Tabs.scss
@@ -80,11 +80,12 @@
         background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
       }
 
-      &:focus::before {
-        top: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
-        bottom: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
-        right: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
-        left: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
+      &:focus {
+        @include nav-tabs-link-focus(
+          $tab-inverse-pills-link-dropdown-toggle-focus-border-color,
+          $nav-tabs-border-radius,
+          $tab-inverse-pills-link-dropdown-distance
+        );
       }
     }
   }
diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss
index 8cb9cf9215a..2d98a95d4b6 100644
--- a/src/Tabs/_variables.scss
+++ b/src/Tabs/_variables.scss
@@ -14,6 +14,7 @@ $tab-inverse-pills-link-dropdown-toggle-padding-x:          .625rem !default;
 $tab-inverse-pills-link-dropdown-toggle-padding-y:          $spacer !default;
 $tab-inverse-pills-link-dropdown-toggle-focus-bg:           $white !default;
 $tab-inverse-pills-link-dropdown-toggle-focus-color:        $primary-500 !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
 $tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
 $tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
 $tab-inverse-pills-link-dropdown-toggle-active-hover-bg:    $primary-300 !default;