$control-radius: $radius !default;
$control-border-width: 1px !default;

@mixin control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  box-shadow: none;
  border-radius: $control-radius;
  font-size: $size-normal;
  position: relative;
  border: $control-border-width solid transparent;
  line-height: 1;

  //  States
  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    outline: none
  }

  &[disabled] {
    cursor: not-allowed
  }
}

%control {
  @include control;
}