From 46a89cc42f2881a27eb6259725d391e02caf81f2 Mon Sep 17 00:00:00 2001
From: Vince Picone <vp@vincepic.one>
Date: Tue, 19 Oct 2021 18:15:19 -0500
Subject: [PATCH] fix: switcher repairs

---
 .../src/components/Header/Header.module.scss  | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
index f2d293c99..ff5451568 100644
--- a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
@@ -138,12 +138,33 @@ header.header {
   transition: background-color $duration--fast-02 $carbon--standard-easing;
 }
 
+.header .header-button.switcher-button {
+  background-color: $carbon--gray-100;
+  border: none;
+  border-color: transparent;
+  border-bottom: 1px solid $carbon--gray-80;
+  &:hover {
+    background-color: $carbon--gray-80;
+  }
+  &:active {
+    background-color: #3d3d3d;
+    border-left: 1px solid $ui-05;
+    border-right: 1px solid $ui-05;
+  }
+  &:focus {
+    outline: 2px solid $carbon--white-0;
+    outline-offset: -2px;
+  }
+}
+
 // Switcher button, extra specificity to override Carbon tooltip button styles
 // Hex values used pending shell theming
 .header :global(.bx--tooltip__trigger).header-button.switcher-button {
   &:focus {
     box-shadow: none;
-    border-color: $carbon--white-0;
+    border: none;
+    outline: 2px solid $carbon--white-0;
+    outline-offset: -2px;
   }
 }
 
@@ -151,29 +172,11 @@ header.header {
   color: $carbon--white-0;
 }
 
-.header .header-button.switcher-button {
-  &:hover {
-    background-color: $carbon--gray-80;
-  }
-  &:focus,
-  &:focus:active {
-    outline: 2px solid $carbon--white-0;
-    outline-offset: -2px;
-  }
-  &:active {
-    background-color: #3d3d3d;
-    border-left: 2px solid $ui-05;
-    border-right: 2px solid $ui-05;
-  }
-}
-
 .header-button.switcher-button.switcher-button--open {
-  border: 2px solid transparent;
-  border-left: 2px solid $carbon--gray-80;
-  border-bottom: 2px solid $carbon--gray-100;
-  background-color: $carbon--gray-100;
+  border: 1px solid transparent;
+  border-left: 1px solid $carbon--gray-80;
+  border-bottom: 1px solid transparent;
   &:active {
-    border-left: 2px solid $carbon--white-0;
     box-shadow: none;
     border-color: $carbon--white-0;
   }