refactor: add visually-hidden util

scss/elements/buttons.scss

@@ -13,7 +13,7 @@
   }
 
   &:hover {
-    color: inherit;
+    color: $color;
     text-decoration: none;
     background-color: $hover-background;
 

scss/form/checkboxes.scss

@@ -53,10 +53,8 @@
   -moz-appearance: none;
   appearance: none;
 
-  background: $color-white;
-  width: 1px;
-  height: 1px;
-  border: 0;
+  @include visually-hidden();
+
   & + span {
     position: relative;
     cursor: $cursor-click-url, pointer;
@@ -86,7 +84,6 @@
     @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
   &.is-dark {
-    background: $base-color;
     + span {
       color: $color-white;
     }

scss/form/radios.scss

@@ -27,10 +27,7 @@
   -moz-appearance: none;
   appearance: none;
 
-  background: $color-white;
-  width: 1px;
-  height: 1px;
-  border: 0;
+  @include visually-hidden();
 
   & + span {
     position: relative;
@@ -57,7 +54,6 @@
     @include pixelize(2px, $radio-checked-focus, $colors);
   }
   &.is-dark {
-    background: $base-color;
     + span {
       color: $color-white;
     }

scss/utilities/_index.scss

@@ -3,3 +3,4 @@
 @import "animations.scss";
 @import "icon-mixin.scss";
 @import "rounded-corners-mixin.scss";
+@import "visually-hidden.scss";

scss/utilities/visually-hidden.scss

@@ -0,0 +1,13 @@
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+@mixin visually-hidden() {
+  // position: absolute;
+  // margin: -1px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}