%flex-1 {
  flex: 1;
}
.form {
  &-input {
    padding: $form-input-padding;
    font-size: $form-input-font-size;
    color: $form-input-font-color;
    border: $form-input-border-width solid $form-input-border-color;
    border-radius: $form-input-border-radius;
    background-color: $form-input-background-color;
    width: 100%;
    @extend %flex-1;
    &:active,
    &:focus {
      outline: none;
      border-color: $form-input-active-border-color;
    }

    ::placeholder {
      color: $form-input-placeholder-color;
    }
    &-sm {
      font-size: $form-input-sm-font-size;
      padding: $form-input-sm-padding;
    }
    &-lg {
      font-size: $form-input-lg-font-size;
      padding: $form-input-lg-padding;
    }
    &-xl {
      font-size: $form-input-xl-font-size;
      padding: $form-input-sm-padding;
    }
  }
  &-field {
    margin-bottom: $form-field-margin-bottom;
    label {
      display: inline-block;
      font-size: $form-field-label-size;
      font-weight: $form-field-label-weigth;
      line-height: $form-field-label-heigth;
      margin-bottom: $form-field-label-mb;
      color: $form-field-label-color;
    }
    &.invalid {
      label {
        color: $form-input-invalid-color;
      }
      .form-input {
        border-color: $form-input-invalid-color;
      }
    }

    &.horizontal {
      display: flex;
      @extend %is-wrap-row;
      .label,
      label {
        margin-right: 1rem;
        margin-bottom: 0;
      }
    }
  }

  &-text {
    display: block;
    width: 100%;
    color: $form-text-color;
    font-size: $form-text-size;
    line-height: normal;
    margin-top: 0.25em;
  }
}

.with-addons {
  @extend %is-wrap-row;
  @extend %flex-1;

  .form-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    @extend %flex-1;
  }
  .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
}