.form-input {
  display: flex;
  flex: 1;
  border: 1px solid $palette-neutral-400;
  position: relative;
  height: 44px;
  box-sizing: border-box;
  @include add-elevation($elevation-low);

  @include rounded($rounded-md);

  &.form-input--small {
    height: 36px;
  }

  &.form-input--focus {
    border-color: $palette-blue-500;
  }

  &.form-input--error {
    border-color: $palette-red-600;
  }

  &.form-input--monospace {
    font-family: monospace;
  }

  &.form-input--disabled {
    cursor: not-allowed;
    color: $palette-neutral-700;
    box-shadow: none;
  }

  &.form-input--loading {
    &::after {
      content: ' ';
      margin-top: -7px;

      @include loading(14px);
      @include absolute(50%, 16px, auto, auto);
    }

    &.form-input--with-icon-left::after {
      left: 16px;
      right: auto;
    }
  }
}

.form-input__input {
  appearance: none;
  border: none;
  width: 100%;
  outline: none;
  line-height: 100%;
  background: none;
  padding: 12px 16px;
  background-color: $white;

  &::placeholder {
    color: $palette-neutral-700;
  }

  @include rounded($rounded-md);

  .form-input--disabled & {
    cursor: not-allowed;
    background-color: $palette-neutral-100;
  }

  .form-input--small & {
    padding: 8px 12px;
  }

  .form-input--with-icon-left & {
    padding-left: 38px;
    padding-right: 8px;

    .form- & {
      padding-right: 12px;
    }
  }
}

.form-input__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: $palette-neutral-600;
  font-size: 16px;

  .form- & {
    font-size: 16px;
    line-height: 16px;
  }

  .form-input--with-icon-left & {
    right: auto;
    left: 12px;
  }

  .form-input--loading & {
    display: none;
  }

  .form-input--error & {
    color: $palette-red-600;
  }

  .form-input--focus & {
    color: $palette-blue-500;
  }

  .form-input--disabled & {
    color: $palette-neutral-600;
  }
}

.form-input__suffix {
  display: flex;
  align-items: center;
  width: fit-content;
  border-left: 1px solid $color-neutral-400;
  appearance: none;
  padding: 0 12px;
  outline: none;
  line-height: 100%;
}

.form-input__input-wrapper {
  display: flex;
}