label {
  color: $gray-darker;
  font-weight: 600;
}

.checkbox,
.radio {
  > label {
    color: $text-color;
  }
}

.form-control {
  @include box-shadow($crm-form-control-shadow);

  &[disabled],
  [disabled] & {
    color: $crm-grayblue-darker;
  }

  &:focus {
    @include box-shadow($crm-form-control-shadow);
    border-color: $brand-primary;
  }

  &[readonly] {
    background-color: $crm-white;
    color: $crm-gray-matte;
  }
}

// Wrapper for a custom error message
.form-error-message {
  margin-top: 5px;
}

.form-horizontal {
  .has-feedback {
    [uib-datepicker-popup] + .form-control-feedback { /* stylelint-disable selector-max-compound-selectors */
      right: 41px;
    }
  }

  @media (min-width: $screen-sm-min) {

    // Labels should always be aligned to the left
    .control-label {
      text-align: left;
    }

    // Checkbox must be vertically aligned when in a form group
    .form-group {
      overflow: initial;

      [type='checkbox'] {
        margin-top: 8px;
      }
    }

    // Label size is always the same also with small/big size input fields
    .form-group-lg,
    .form-group-sm {
      .control-label {
        font-size: $font-size-base;
      }
    }
  }
}

// A .form-horizontal spreaded on a single line
.form-horizontal-inline {
  .form-group {
    margin-bottom: 0;
  }
}

// Styling for different .form-inline fields
.form-inline {

  @media (min-width: $screen-sm-min) {
    .checkbox [type='checkbox'],
    .radio [type='radio'] {
      margin-right: 10px;
    }
  }
}

// Define a new class "form-inline-tabs" that can be used to wrap form-groups. This new class can be used in case of this
// form group is clickable and has specific interactive action E.g (Can be used with form groups that wrapping checkboxes).
// We also define "active" class that can be assigned to form group and give it the appropriate interactive style.
.form-inline-tabs {
  .form-group {
    border: 1px solid $crm-grayblue-darker;
    box-shadow: $crm-form-control-shadow;
    line-height: 1em;
    min-width: 180px;
    padding: 8px 15px;

    &.active {
      background-color: $gray-lighter;
    }

    &:first-child {
      border-radius: $border-radius-small 0 0 $border-radius-small;
    }

    &:last-child {
      border-radius: 0 $border-radius-small $border-radius-small 0;
    }
  }
}

// Removing color from labels of fields with status
.has-success,
.has-warning,
.has-error {
  .control-label {
    color: $gray-darker;
  }
}

// Restoring label colors for checkboxes and radio buttons with status
.has-success {

  @include form-control-validation($state-success-text, $state-success-border, $state-success-bg);

  .radio label,
  .checkbox label,
  .radio-inline label,
  .checkbox-inline label {
    color: $state-success-text;
  }
}

.has-warning {

  @include form-control-validation($state-warning-text, $state-warning-border, $state-warning-bg);

  .radio label,
  .checkbox label,
  .radio-inline label,
  .checkbox-inline label {
    color: $state-warning-text;
  }
}

.has-error {
  .radio label,
  .checkbox label,
  .radio-inline label,
  .checkbox-inline label {
    color: $state-danger-text;
  }
}

.input-group-btn {
  .btn-default {
    border-color: $input-border;
    text-transform: none;
  }
}

// AngularJS CSS classes
.form-submitted,
.ng-submitted {
  .ng-invalid {
    border: 1px solid $brand-danger;
  }
}

// Required mark (*)
.required-mark {
  &::after {
    color: $brand-danger;
    content: '*';
    margin-left: 5px;
  }
}

.required-mark-input {
  position: relative;

  &::after {
    bottom: 0;
    position: absolute;
    right: -10px;
    top: 0;
  }
}