$control-radius: v("radius") !default
$control-radius-small: v("radius-small") !default

$control-border-width: 1px !default

+register(control-border-width,$control-border-width, true)

$control-height: 2.5em !default
$control-line-height: 1.5 !default

$control-padding-vertical: calc(0.5em - #{v("control-border-width")}) !default
$control-padding-horizontal: calc(0.75em - #{v("control-border-width")}) !default

+register(control-radius,$control-radius, true)
+register(control-radius-small,$control-radius-small, true)
+register(control-height,$control-height, true)
+register(control-line-height,$control-line-height, true)
+register(control-padding-vertical,$control-padding-vertical, true)
+register(control-padding-horizontal,$control-padding-horizontal, true)

=control
  -moz-appearance: none
  -webkit-appearance: none
  align-items: center
  border: v("control-border-width") solid transparent
  border-radius: v("control-radius")
  box-shadow: none
  display: inline-flex
  font-size: v("size-normal")
  height: v("control-height")
  justify-content: flex-start
  line-height: v("control-line-height")
  padding: v("control-padding-vertical") v("control-padding-horizontal")
  position: relative
  vertical-align: top
  // States
  &:focus,
  &.is-focused,
  &:active,
  &.is-active
    outline: none
  &[disabled],
  fieldset[disabled] &
    cursor: not-allowed

%control
  +control

// The controls sizes use mixins so they can be used at different breakpoints
=control-small
  border-radius: v("control-radius-small")
  font-size: v("size-small")
=control-medium
  font-size: v("size-medium")
=control-large
  font-size: v("size-large")