@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);
}

@mixin control-backdrop($style: base) {
  @if $style == base {
    position: relative;
    border: var(--p-control-border-width) solid var(--p-border);
    background-color: var(--p-surface);
    border-radius: var(--p-border-radius-base);

    &::before {
      content: '';
      position: absolute;
      top: calc(-1 * var(--p-control-border-width));
      right: calc(-1 * var(--p-control-border-width));
      bottom: calc(-1 * var(--p-control-border-width));
      left: calc(-1 * var(--p-control-border-width));
      border-radius: var(--p-border-radius-base);
      background-color: var(--p-interactive);
      opacity: 0;
      transform: scale(0.25);
      transition: opacity duration(fast) var(--p-ease),
        transform duration(fast) var(--p-ease);
    }

    &.hover,
    &:hover {
      cursor: pointer;
      border-color: var(--p-border-hovered);
    }
  } @else if $style == active {
    border-color: var(--p-interactive);

    &::before {
      opacity: 1;
      transform: scale(1);
      @media (-ms-high-contrast: active) {
        border: 2px solid ms-high-contrast-color('text');
      }
    }
  } @else if $style == disabled {
    border-color: var(--p-border-disabled);

    &::before {
      background-color: var(--p-action-secondary-disabled);
    }

    &:hover {
      cursor: default;
    }
  } @else if $style == error {
    border-color: var(--p-border-critical);
    background-color: var(--p-surface-critical);

    &.hover,
    &:hover {
      border-color: var(--p-border-critical);
    }

    &::before {
      background-color: var(--p-border-critical);
    }
  }
}