/*————————————

Error state

————————————*/

.u-has-error {

&-v1,
&-v1-2,
&-v1-3 {
  .form-control,
  .input-group-addon,
  [class*="u-select"] {
    background-color: #fff0f0;

    &[readonly] {
      background-color: #fff0f0;
    }
  }

  .form-control-feedback {
    color: $g-color-red;
  }

  [class*="u-check-icon"] {
    background-color: #fff0f0;
  }
}

&-v1-2,
&-v1-3 {
  .form-control,
  .input-group-addon,
  [class*="u-select"] {
    border-color: $g-color-red;
  }

  .input-group-addon:last-child,
  .chosen-single div b {
    color: $g-color-red;
  }

  .error {
    display: block;
  }
}

&-v1-3 {
  position: relative;

  .input-group-addon,
  .input-group-addon:last-child {
    color: $g-color-white;
    background-color: $g-color-red;
  }

  .form-control-feedback {
    &::before {
      content: "";
      position: absolute;
      bottom: -3px;
      right: 18px;
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 3px 3px 0 3px;
      border-color: $g-color-red transparent transparent transparent;
    }
  }
}

&-v2 {
  &:after {
    content: '\f00d';
    position: absolute;
    top: 50%;
    right: 15px;
    font-family: 'FontAwesome', sans-serif;
    color: $g-color-red;
    transform: translateY(-50%);
  }

  input:not([type="checkbox"], [type="radio"]),
  textarea {
    border-color: $g-color-red;
  }
}

}