$control-radius: var(--radius, #{$radius}) !default
$control-radius-small: var(--radius-small, #{$radius-small}) !default

$control-border-width: 1px !default

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

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

=control
  -moz-appearance: none
  -webkit-appearance: none
  align-items: center
  border: var(--control-border-width, #{$control-border-width}) solid transparent
  border-radius: var(--control-radius, #{$control-radius})
  box-shadow: none
  display: inline-flex
  font-size: var(--size-normal, #{$size-normal})
  height: var(--control-height, #{$control-height})
  justify-content: flex-start
  line-height: var(--control-line-height, #{$control-line-height})
  padding-bottom: var(--control-padding-vertical, #{$control-padding-vertical})
  padding-left: var(--control-padding-horizontal, #{$control-padding-horizontal})
  padding-right: var(--control-padding-horizontal, #{$control-padding-horizontal})
  padding-top: var(--control-padding-vertical, #{$control-padding-vertical})
  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: var(--control-radius-small, #{$control-radius-small})
  font-size: var(--size-small, #{$size-small})
=control-medium
  font-size: var(--size-medium, #{$size-medium})
=control-large
  font-size: var(--size-large, #{$size-large})