$form-control-background: #fdfdfd;

.form-group {
  &.form-check-label {
    color: $gunmetal;
  }

  label.required:after {
    background: $red-700;
  }
}

.form-control {
  color: $gunmetal;
  background-color: $form-control-background;
  border: solid 0.0625rem $gray-200;
  border-bottom: solid 0.0625rem $gray-300;
  border-radius: 0.25rem;

  &:focus {
    color: $black;
    border-color: $gray-200;
    border-bottom-color: $blue-700;
    background: $white;

    &::placeholder {
      color: $gray-200;
    }
  }

  &:disabled {
    background: $gray-25;
    border-bottom-color: $gray-100;
    box-shadow: inset 0 0 rem(6) $shadow-lighter;
    color: $gray-600;
  }

  &::placeholder {
    color: $gray-400;
  }
}

// PASSWORD INPUT
.password-input .input-group-addon {
  color: $blue-700;
  border-right: solid 0.0625rem $gray-200 !important;
}

// DROP-DOWN / SELECTS
select.form-control, select.form-control:focus {
  background-image: linear-gradient(45deg, transparent 50%, $gunmetal 50%), linear-gradient(135deg, $gunmetal 50%, transparent 50%);
}

//RADIO BUTTONS
.form-check input[type="radio"] {
  +.radio {
    background: $gray-75;
    border: solid rem(1) $gray-500;
  }

  &:checked+.radio {
    background: $blue-700;

    &:before {
      background: $white;
      box-shadow: 0 0.125em 0.25em $gray-800;
    }
  }

  &:disabled+.radio {
    border-color: $gray-200;
  }
}

// "TOGGLE" CHECKBOX
.form-check input[type="checkbox"] {
  +.checkbox {
    background: $gray-100;

    &:before {
      border: solid 0.0625rem $gray-150;
      background: $white;
    }
  }

  &:checked + .checkbox {
    background: $alert-green;
  }
}

.input-group-addon {
  background: $gray-25;
  border: solid 0.0625rem $gray-200;
  border-bottom-color: $gray-300;
  color: $gray-300;

  &.btn-link:hover {
    border-top: solid 0.0625rem $gray-200;
    border-left: solid 0.0625rem $gray-200;
    border-bottom-color: $gray-300;
  }
}

.input-group .form-control:focus + .input-group-addon {
  border-bottom-color: $blue-700;
  background: $form-control-background;
}

.range {
  box-sizing: border-box;
  margin: 0 0.625rem;
  padding: 0 0 1.25rem;

  input[type="range"] {
    width: 100%;
  }
}
