// Forms .form-group {

&:not(:last-child) {
  margin-bottom: $layout-spacing;
}

}

fieldset {

margin-bottom: $layout-spacing-lg;

}

legend {

font-size: $font-size-lg;
font-weight: 500;
margin-bottom: $layout-spacing-lg;

}

// Form element: Label .form-label {

display: block;
line-height: $line-height;
padding: $control-padding-y + $border-width 0;

&.label-sm {
  padding: $control-padding-y-sm + $border-width 0;
}

&.label-lg {
  padding: $control-padding-y-lg + $border-width 0;
}

}

// Form element: Input .form-input {

@include control-transition();
appearance: none;
background: $bg-color-light;
background-image: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: $body-font-color;
display: block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
max-width: 100%;
outline: none;
padding: $control-padding-y $control-padding-x;
position: relative;
width: 100%;
&:focus {
  @include control-shadow();
  border-color: $primary-color;
}
&::placeholder {
  color: $gray-color;
}

// Input sizes
&.input-sm {
  font-size: $font-size-sm;
  height: $control-size-sm;
  padding: $control-padding-y-sm $control-padding-x-sm;
}

&.input-lg {
  font-size: $font-size-lg;
  height: $control-size-lg;
  padding: $control-padding-y-lg $control-padding-x-lg;
}

&.input-inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}

// Input types
&[type="file"] {
  height: auto;
}

}

// Form element: Textarea textarea.form-input {

height: auto;

}

// Form element: Input hint .form-input-hint {

color: $gray-color;
font-size: $font-size-sm;
margin-top: $unit-1;

.has-success &,
.is-success + & {
  color: $success-color;
}

.has-error &,
.is-error + & {
  color: $error-color;
}

}

// Form element: Select .form-select {

appearance: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: inherit;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;

&[size],
&[multiple] {
  height: auto;

  option {
    padding: $unit-h $unit-1;
  }
}
&:not([multiple]):not([size]) {
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
  padding-right: $control-icon-size + $control-padding-x;
}
&:focus {
  @include control-shadow();
  border-color: $primary-color;
}
&::-ms-expand {
  display: none;
}

// Select sizes
&.select-sm {
  font-size: $font-size-sm;
  height: $control-size-sm;
  padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
}

&.select-lg {
  font-size: $font-size-lg;
  height: $control-size-lg;
  padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}

}

// Form Icons .has-icon-left, .has-icon-right {

position: relative;

.form-icon {
  height: $control-icon-size;
  margin: 0 $control-padding-y;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: $control-icon-size;
}

}

.has-icon-left {

.form-icon {
  left: $border-width;
}

.form-input {
  padding-left: $control-icon-size + $control-padding-y * 2;
}

}

.has-icon-right {

.form-icon {
  right: $border-width;
}

.form-input {
  padding-right: $control-icon-size + $control-padding-y * 2;
}

}

// Form element: Checkbox and Radio .form-checkbox, .form-radio, .form-switch {

display: inline-block;
line-height: $line-height;
padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
position: relative;

input {
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  &:focus + .form-icon {
    @include control-shadow();
    border-color: $primary-color;
  }
  &:checked + .form-icon {
    background: $primary-color;
    border-color: $primary-color;
  }
}

.form-icon {
  @include control-transition();
  border: $border-width solid $border-color-dark;
  cursor: pointer;
  display: inline-block;
  position: absolute;
}

}

.form-checkbox, .form-radio {

.form-icon {
  background: $bg-color-light;
  height: $control-icon-size;
  left: 0;
  top: ($control-size-sm - $control-icon-size) / 2;
  width: $control-icon-size;
}

input {
  &:active + .form-icon {
    background: $bg-color-dark;
  }
}

} .form-checkbox {

.form-icon {
  border-radius: $border-radius;
}

input {
  &:checked + .form-icon {
    &::before {
      background-clip: padding-box;
      border: $border-width-lg solid $light-color;
      border-left-width: 0;
      border-top-width: 0;
      content: "";
      height: 12px;
      left: 50%;
      margin-left: -4px;
      margin-top: -8px;
      position: absolute;
      top: 50%;
      transform: rotate(45deg);
      width: 8px;
    }
  }
  &:indeterminate + .form-icon {
    background: $primary-color;
    border-color: $primary-color;
    &::before {
      background: $bg-color-light;
      content: "";
      height: 2px;
      left: 50%;
      margin-left: -5px;
      margin-top: -1px;
      position: absolute;
      top: 50%;
      width: 10px;
    }
  }
}

} .form-radio {

.form-icon {
  border-radius: 50%;
}

input {
  &:checked + .form-icon {
    &::before {
      background: $bg-color-light;
      border-radius: 50%;
      content: "";
      height: 4px;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
    }
  }
}

}

// Form element: Switch .form-switch {

padding-left: ($unit-8 + $control-padding-x);

.form-icon {
  background: $gray-color-light;
  background-clip: padding-box;
  border-radius: $unit-2 + $border-width;
  height: $unit-4 + $border-width * 2;
  left: 0;
  top: ($control-size-sm - $unit-4) / 2 - $border-width;
  width: $unit-8;
  &::before {
    @include control-transition();
    background: $bg-color-light;
    border-radius: 50%;
    content: "";
    display: block;
    height: $unit-4;
    left: 0;
    position: absolute;
    top: 0;
    width: $unit-4;
  }
}

input {
  &:checked + .form-icon {
    &::before {
      left: 14px;
    }
  }
  &:active + .form-icon {
    &::before {
      background: $bg-color;
    }
  }
}

}

// Form element: Input groups .input-group {

display: flex;

.input-group-addon {
  background: $bg-color;
  border: $border-width solid $border-color-dark;
  border-radius: $border-radius;
  line-height: $line-height;
  padding: $control-padding-y $control-padding-x;

  &.addon-sm {
    font-size: $font-size-sm;
    padding: $control-padding-y-sm $control-padding-x-sm;
  }
  &.addon-lg {
    font-size: $font-size-lg;
    padding: $control-padding-y-lg $control-padding-x-lg;
  }
}

.form-input,
.form-select {
  flex: 1 1 auto;
}

.input-group-btn {
  z-index: $zindex-0;
}

.form-input,
.form-select,
.input-group-addon,
.input-group-btn {
  &:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
    margin-left: -$border-width;
  }
  &:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: -$border-width;
  }
  &:focus {
    z-index: $zindex-0 + 1;
  }
}

.form-select {
  width: auto;
}

&.input-inline {
  display: inline-flex;
}

}

// Form validation states .form-input, .form-select {

.has-success &,
&.is-success {
  border-color: $success-color;
  &:focus {
    @include control-shadow($success-color);
  }
}

.has-error &,
&.is-error {
  border-color: $error-color;
  &:focus {
    @include control-shadow($error-color);
  }
}

}

.form-checkbox, .form-radio, .form-switch {

.has-error &,
&.is-error {
  .form-icon {
    border-color: $error-color;
  }

  input {
    &:checked + .form-icon {
      background: $error-color;
      border-color: $error-color;
    }

    &:focus + .form-icon {
      @include control-shadow($error-color);
      border-color: $error-color;
    }
  }
}

}

// validation based on :placeholder-shown (Edge doesn't support it yet) .form-input {

&:not(:placeholder-shown) {
  &:invalid {
    border-color: $error-color;
    &:focus {
      @include control-shadow($error-color);
    }

    & + .form-input-hint {
      color: $error-color;
    }
  }
}

}

// Form disabled and readonly .form-input, .form-select {

&:disabled,
&.disabled {
  background-color: $bg-color-dark;
  cursor: not-allowed;
  opacity: .5;
}

}

.form-input {

&[readonly] {
  background-color: $bg-color;
}

}

input {

&:disabled,
&.disabled {
  & + .form-icon {
    background: $bg-color-dark;
    cursor: not-allowed;
    opacity: .5;
  }
}

}

.form-switch {

input {
  &:disabled,
  &.disabled {
    & + .form-icon::before {
      background: $bg-color-light;
    }
  }
}

}

// Form Horizontal .form-horizontal {

padding: $layout-spacing;

.form-group {
  display: flex;
}

.form-checkbox,
.form-radio,
.form-switch {
  margin: ($control-size - $control-size-sm) / 2 0;
}

}