Remove focus outlines from interactive elements

styles/10-components-interactive-elements.css

@@ -101,7 +101,25 @@
     }
 
     .sg-interaction-element:focus,
-    .sg-interaction-element:focus-visible {
+    .sg-interaction-element:focus-visible,
+    .sg-mode-toggle:focus,
+    .sg-mode-toggle:focus-visible,
+    .sg-sandwich-button:focus,
+    .sg-sandwich-button:focus-visible,
+    .sg-input-clear-button:focus,
+    .sg-input-clear-button:focus-visible,
+    .sg-help-icon:focus,
+    .sg-help-icon:focus-visible,
+    .sg-sandwich-menu-link:focus,
+    .sg-sandwich-menu-link:focus-visible,
+    .sg-checkbox-field:focus,
+    .sg-checkbox-field:focus-visible,
+    .sg-radio-field:focus,
+    .sg-radio-field:focus-visible,
+    .sg-pulldown-option:focus,
+    .sg-pulldown-option:focus-visible,
+    .sg-hyperlink:focus,
+    .sg-hyperlink:focus-visible {
       outline: none;
     }
 
@@ -653,11 +671,6 @@
       cursor: pointer;
     }
 
-    .sg-mode-toggle:focus,
-    .sg-mode-toggle:focus-visible {
-      outline: none;
-    }
-
     .sg-mode-toggle__label {
       font-family: var(--font-family-base);
       font-size: var(--font-size-base);