$input-required-asterisk-color: $state-error !default;

.form-control {
   background-color: $input-bg;
   border: $input-border-width solid $input-border-color;
   border-radius: $input-border-radius;
   color: $input-color;
   display: block;
   font-size: 16px; // minimum to prevent safari zoom
   line-height: $input-line-height;
   min-height: $input-height;
   padding: $input-padding-y $input-padding-x;
   transition: border-color ease-in-out $transition-speed;
   width: 100%;

   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {
      background-color: transparent;
      border: 0;
   }

   &:focus {
      border-color: $input-border-focus;
      outline: none;
   }

   &::placeholder {
      color: #828282;
      opacity: 1; // FF override https://github.com/twbs/bootstrap/pull/11526.
   }

   &:disabled,
   &[readonly] {
      background-color: #f4f4f4;
      opacity: 1; // iOS fix https://github.com/twbs/bootstrap/issues/11655.
      pointer-events: none;
   }
}

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

   label {
      color: $label-color;
      margin-bottom: .25rem;
   }

   &.required label::after {
      color: $input-required-asterisk-color;
      content: "*";
      font-size: 16px;
      line-height: 1;
      margin-left: 3px;
   }
}

select.form-control {
   appearance: none;
   background: $input-bg escape-svg($form-select-indicator) $form-select-background;
   border: $input-border-width solid $input-border-color;
   cursor: pointer;
   padding: $input-padding-y ($input-padding-x + $form-select-indicator-padding) $input-padding-y $input-padding-x;
   vertical-align: middle;

   &:focus {
      &::-ms-value {
         color: $input-color;
         background-color: $input-bg;
      }
   }

   &[multiple],
   &[size]:not([size="1"]) {
      height: auto;
      padding-right: $input-padding-x;
      background-image: none;
   }

   &[readonly] {
      background-image: none;
   }

   // Hides the default caret in IE11
   &::-ms-expand {
      display: none;
   }

   // Remove outline from select box in FF
   &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 $input-color;
   }
}

// globaly disable number arrows
input[type=number] {
   @include disable-spinner;
}

input[type=date].form-control {
   appearance: none;
}


// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
   display: block;
}

.input-group {
   display: flex;
   align-items: stretch;

   .form-control {
      flex: 1 1 auto;
      width: 1%;
      min-width: 0;
      position: relative;

      &:focus {
         z-index: 3;
      }
   }

   .btn {
      margin-left: -$input-border-width;
      position: relative;
      z-index: 2;

      &:focus {
         z-index: 3;
      }
   }

   @if $btn-border-radius {
      .form-control {
         border-radius: $btn-border-radius 0 0 $btn-border-radius;
      }

      .btn {
         border-radius: 0 $btn-border-radius $btn-border-radius 0;
      }
   } @else if $input-border-radius {
      .form-control {
         border-radius: $input-border-radius 0 0 $input-border-radius;
      }

      .btn {
         border-radius: 0 $input-border-radius $input-border-radius 0;
      }
   }
}

.form-group-legend {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;

   input,
   select {
      order: 2;
   }

   label {
      margin-right: auto;
   }

   .legend {
      color: $text-muted;
   }

   p {
      margin-bottom: .25rem;
   }
}
