$control-radius: $radius !default $control-radius-small: $radius-small !default

$control-border-width: 1px !default

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

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

control

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

control-medium

font-size: $size-medium

control-large

font-size: $size-large