.form-input {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;

  .form-input-wrapper {
    position: relative;
    display: flex;

    input,
    textarea {
      display: block;
      width: 100%;
      height: 43px;
      padding: 6px 12px 6px 12px;
      color: $input-color;
      font-size: 16px;
      line-height: 1.42857;
      text-overflow: ellipsis;
      background-color: $input-bg;
      background-image: none;
      border: 1px solid $input-border;
      border-radius: 3px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      transition:
        border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;

      &[type="number"]::-webkit-inner-spin-button,
      &[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
      }

      &[type="number"] {
        -moz-appearance: textfield;
      }

      &:focus {
        outline: none;
      }

      &.clearable {
        padding-right: 50px;
      }
    }

    textarea {
      height: auto;
    }

    .form-input-prefix,
    .form-input-suffix {
      display: flex;
      align-items: center;
      padding: 0 6px;
      background-color: lighten($input-bg, 10%);
      border: 1px solid $input-border;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .form-input-prefix {
      border-right: none;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .form-input-suffix {
      border-left: none;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    .clear {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 100%;
      margin: 0;
      cursor: pointer;
    }

    &.from-input-wrapper-with-prefix {
      input,
      textarea {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &.from-input-wrapper-with-suffix {
      input,
      textarea {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  &.form-input-clearable {
    input,
    textarea {
      padding-right: 50px;
    }
  }

  &.form-input-disabled {
    input,
    textarea {
      color: darken($input-color, 10%);
      cursor: not-allowed;
      opacity: 0.9;
    }
  }

  &.form-input-large {
    input,
    textarea {
      height: 55px;
      padding: 10px 16px;
      font-size: 19px;
      line-height: 1.33333;
      border-radius: 6px;
    }
  }

  &.form-input-clean {
    margin-bottom: 0;

    input,
    textarea {
      border: none;
      border-radius: 0;
    }
  }

  &.form-input-inline {
    margin-bottom: 0;
  }

  &.has-error {
    input,
    textarea {
      border-color: darken($danger, 15%);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .form-input-prefix,
    .form-input-suffix {
      border-color: darken($danger, 15%);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .from-input-wrapper-with-prefix {
      input,
      textarea {
        border-left: none;
      }
    }

    .from-input-wrapper-with-suffix {
      input,
      textarea {
        border-right: none;
      }
    }
  }
}

.input-group-flex,
.input-group {
  margin-bottom: 1rem;

  .form-input {
    margin-bottom: 0;
  }
}
