@function control-height() {
  @return rem(34px);
}

@function control-slim-height() {
  @return rem(26px);
}

@function control-vertical-padding() {
  @return (control-height() - line-height(input) - rem(2px)) / 2;
}

@function control-icon-transition() {
  @return transform duration() easing();
}

@mixin control-backdrop($style: base) {
  @if $style == base {
    background: white;
    border: border(dark);
    box-shadow: 0 0 0 2px transparent;
    border-radius: border-radius(small);
    transition-property: box-shadow, background, border-color;
    transition-duration: duration();
    transition-timing-function: easing();

  } @else if $style == focused {
    border-color: color('blue');
    box-shadow: 0 0 0 2px rgba(color('blue'), 0.25);

  } @else if $style == checked {
    background: color('blue');
    border-color: transparent;

  } @else if $style == error {
    background: color('red', 'lighter');
    border-color: color('red');
    // box-shadow: 0 0 0 2px transparent;

  } @else if $style == disabled {
    background: color('sky', 'lighter');
    border: border(dark);
    box-shadow: none;
    transition: none;

  } @else if $style == checked-disabled {
    background: color('sky', 'dark');
    box-shadow: none;
    transition: none;

  } @else if $style == checked-error {
    background: color('red');
    box-shadow: none;

  } @else if $style == focused-error {
    border-color: color('blue');
    box-shadow: 0 0 0 2px rgba(color('blue'), 0.25);

  }
}