From 21ddef7ae39b428630f2192bcb2abeab9c9d5812 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 12 Dec 2019 11:22:54 -0600
Subject: [PATCH] fix(button): update focus styles to use box-shadow

---
 packages/components/src/components/button/_mixins.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
index 42741257e0f5..020f645206cc 100644
--- a/packages/components/src/components/button/_mixins.scss
+++ b/packages/components/src/components/button/_mixins.scss
@@ -26,8 +26,7 @@
   text-align: left;
   text-decoration: none;
   transition: all $duration--fast-01 motion(entrance, productive);
-  outline: $button-outline-width solid transparent;
-  outline-offset: -4px;
+  outline: none;
   position: relative;
   max-width: rem(320px);
 
@@ -72,7 +71,7 @@
 
   &:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   &:disabled:hover,
@@ -83,7 +82,7 @@
     background-color: $disabled-02;
     border-color: $disabled-02;
     text-decoration: none;
-    outline-color: $disabled-02;
+    box-shadow: none;
   }
 
   &:active {