CSS outline fixes for keyboard users.

src/styles/_base.scss

@@ -63,9 +63,13 @@ h4 {
 }
 
 input:focus,
+textarea:focus,
+*[role="button"]:focus,
+button:focus,
+.maputnik-toolbar-link:focus,
 select:focus {
-  color: $color-white !important;
-  outline: #8e8e8e auto 1px !important;
+  color: $color-white;
+  outline: #8e8e8e auto 1px;
 }
 
 label:hover {

src/styles/_input.scss

@@ -124,9 +124,13 @@
 // CHECKBOX
 .maputnik-checkbox {
   position: absolute;
-  z-index: -1;
-  opacity: 0;
-  width: 50%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  left: 0;
+  top: 0;
+  outline: none;
 
   &-wrapper {
     @extend .maputnik-input;
@@ -141,6 +145,7 @@
   }
 
   &-box {
+    z-index: 2;
     display: inline-block;
     text-align: center;
     height: 24px;
@@ -152,12 +157,26 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // So they fall through to the <input/> beneath
+    pointer-events: none;
 
     @media screen and (prefers-reduced-motion: reduce) {
       transition-duration: 0ms;
     }
   }
 
+  &:focus {
+    z-index: 8;
+  }
+
+  &:focus + &-box {
+    z-index: 9;
+  }
+
+
   &-icon {
     width: 50%;
     height: 50%;
@@ -203,7 +222,6 @@
 
 .maputnik-input-block-content {
   position: relative;
-  overflow: hidden;
 }
 
 .SpecDoc__sdk-support {

src/styles/_layer.scss

@@ -143,6 +143,8 @@
     color: inherit;
     text-decoration: none;
     cursor: pointer;
+    // HACK: Remove important
+    outline: none !important;
   }
 
   &-group-header {