Fix control variables

sass/utilities/controls.sass

@@ -1,37 +1,15 @@
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
-$control-disabled: $border !default
-$control-disabled-background: $background !default
-
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
-$control-size: $size-normal !default
-$control-size-small: $size-small !default
-
-$control-icon: $grey-lighter !default
-$control-icon-active: $grey-light !default
 
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  background-color: $control-background
-  border: 1px solid $control-border
+  border: none
   border-radius: $control-radius
   box-shadow: none
-  color: $control
   display: inline-flex
-  font-size: $control-size
+  font-size: 1em
   height: 2.5em
   justify-content: flex-start
   line-height: 1.5
@@ -39,21 +17,15 @@ $control-icon-active: $grey-light !default
   padding-right: 0.75em
   position: relative
   vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
+  // States
   &:focus,
+  &.is-focused,
+  &:active,
   &.is-active
-    border-color: $control-active-border
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $control-disabled-background
-    border-color: $control-disabled
-    cursor: not-allowed
     pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
 
 =control-small
   border-radius: $control-radius-small

sass/utilities/mixins.sass

@@ -4,11 +4,11 @@
   border-top: 0
   content: " "
   display: block
-  height: 7px
+  height: 0.5em
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
-  width: 7px
+  width: 0.5em
 
 =block
   &:not(:last-child)
@@ -133,9 +133,9 @@
   border-top-color: transparent
   content: ""
   display: block
-  height: 16px
+  height: 1rem
   position: relative
-  width: 16px
+  width: 1rem
 
 =overlay($offset: 0)
   bottom: $offset

sass/utilities/variables.sass

@@ -104,11 +104,13 @@ $link-invert: $primary-invert !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
-$link-hover-background: $white-ter !default
-$link-hover-border: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
 
 $link-active: $grey-darker !default
-$link-active-border: $grey-darker !default
+$link-active-border: $grey-dark !default
 
 // Typography
 $family-primary: $family-sans-serif !default