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

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

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

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

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

    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      background: linear-gradient(
        to bottom,
        color('white'),
        color('sky', 'lighter')
      );
      border-radius: border-radius() - 1px;
    }

    @media (-ms-high-contrast: active) {
      background: transparent;
      border: 2px solid ms-high-contrast-color('button-text');
      transition: none;
      color: color('state', 'hover');

      &::after {
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
        background: none;
        border-radius: border-radius() + 1px;
      }
    }
  } @else if $style == focused {
    background: color('indigo');
    box-shadow: 0 0 0 1px color('indigo'), shadow(transparent);

    &::after {
      background: color('white');
    }

    @media (-ms-high-contrast: active) {
      &::after {
        border: 1px dashed ms-high-contrast-color('button-text');
      }
    }
  } @else if $style == error {
    background: color('red', 'dark');
    box-shadow: 0 0 0 1px transparent;

    &::after {
      background: color('red', 'lighter');
    }
  } @else if $style == disabled {
    background: color('sky');
    box-shadow: none;

    &::after {
      background: color('sky', 'lighter');
    }

    @media (-ms-high-contrast: active) {
      color: ms-high-contrast-color('disabled-text');
    }
  } @else if $style == focused-error {
    background: color('indigo');
    box-shadow: 0 0 0 1px color('indigo');

    &::after {
      background: color('red', 'lighter');
    }
  }
}