/**
 * Form control
 */
.form-control {
  border-radius: 2px;
  border: none;
  border-bottom: 1px solid #E0E0E0;
  box-shadow: 0 1px 5px -2px rgba(0,0,0,.2);

  &:focus {
    box-shadow: 0 1px 5px -2px #42A5F5;
    border-bottom: 1px solid #2196F3;
  }

}

.form-group {
  label {
    color: #616161;
  }
}

.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label  {
    color: @text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: @border-color;
    &:focus {
      border-color: darken(@border-color, 10%);
      box-shadow: 0 1px 5px -2px @background-color;
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: @text-color;
  }
}

.input-group-addon {
  border: none;
  border-bottom: 1px solid #E0E0E0;
  border-radius: 0;
}

// Feedback states
.has-success {
  .form-control-validation(#4CAF50; #4CAF50; #C8E6C9);
}
.has-warning {
  .form-control-validation(#FF9800; #FF9800; #FFE0B2);
}
.has-error {
  .form-control-validation(#F44336; #F44336; #FFCDD2);
}