.form-control {
  width: 100%;
  border: none;
  border-bottom: $input-border-width solid $input-border-color;

  &:disabled,
  &.disabled,
  &[disabled],
  &[readonly] {
    border-bottom: solid 1px transparent;
    background-color: $input-disabled-bg;
    background-image: linear-gradient(90deg, $input-disabled-border-color 0, $input-disabled-border-color 33%, transparent 0);
    background-image: -ms-linear-gradient(left,transparent 0,$input-disabled-border-color 100%);
    background-size: .4rem .2rem;
    background-position: bottom -.1rem left 0;
    background-repeat: repeat-x;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:focus,
  &[class*="is-"] {
    box-shadow: none !important;
  }
}

.form-group {
  position: relative;
  margin-bottom: $form-group-margin-bottom;

  label {
    color: $label-color;
    font-size: $label-font-size;
    line-height: $label-line-height;
    margin-bottom: $label-margin-bottom;
  }

  .form-control-highlight {
    position: relative;
    max-width: 100%;
    @include border-highlight;
  }

  &.is-focused {
    .form-control-highlight {
      @include border-highlight-active;
    }
  }
}

.form-inverse {
  .form-control {
    color: $input-inverse-color;
    background-color: $input-inverse-bg;
    border-bottom-color: $input-inverse-border-color;

    @include form-control-inverse-focus();

    &::placeholder {
      color: rgba($input-inverse-color, .5);
    }

    &:disabled,
    &.disabled,
    &[disabled],
    &[readonly] {
      border-bottom: solid 1px transparent;
      background-color: $input-inverse-disabled-bg;
      background-image: linear-gradient(90deg, $input-inverse-disabled-border-color 0, $input-inverse-disabled-border-color 33%, transparent 0);
      background-image: -ms-linear-gradient(left,transparent 0,$input-inverse-disabled-border-color 100%);

      &::placeholder {
        color: rgba($input-inverse-color, .25);
      }
    }
  }

  .form-group {
    label {
      color: $label-inverse-color;
    }

    .form-control-highlight {
      @include border-highlight-inverse;
    }
  }
}