.Input {
  position: relative;
  overflow: hidden;
  color: var(--muted-color);

  &-prefix-icon {
    margin-right: -36px;
    // FA Kit dynamically injects a stylesheet after ours that sets width: 1.25em
    // on .svg-inline--fa elements. !important ensures our fixed width wins.
    width: 36px !important;
    font-size: 14px;
    text-align: center;
    // FA's duotone styles set position: relative on the icon element itself
    // (for their two-layer rendering) and load after us at equal specificity,
    // which would pop the icon out of the input into normal flow. Absolute
    // positioning is fully compatible with the duotone layers — their ::after
    // anchors to any non-static position.
    position: absolute !important;
    pointer-events: none;

    // FontAwesome Kit overrides display which breaks vertical centering.
    // Use flexbox with !important to maintain proper icon alignment.
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
  }

  .FormControl {
    transition: var(--transition), width 0.4s;
    box-sizing: inherit !important;

    &[readonly] {
      opacity: 1;
    }
  }

  &--withPrefix {
    .FormControl {
      padding-left: 32px;
    }
  }

  &-clear {
    // It looks very weird due to the padding given to the button..
    &:focus {
      outline: none;
    }

    // ...so we display the ring around the icon inside the button, with an offset
    .add-keyboard-focus-ring-nearby("> *");
    .add-keyboard-focus-ring-nearby-offset("> *", 4px);
  }

  &--withClear {
    // TODO v2.0 check if this is supported by Firefox,
    // if so, consider switching to it.
    ::-webkit-search-cancel-button {
      display: none;
    }

    .FormControl {
      padding-right: 32px;
    }
  }

  .LoadingIndicator-container {
    height: 100%;
  }

  .Button {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    margin-left: -36px;
    width: 36px !important;

    &.LoadingIndicator {
      width: var(--size) !important;
      padding: 0;
    }
  }
}