// Form validation error state
//
// Used in form/Textbox.scss to generate the form validation CSS for errors.
@mixin dijit-form-control-validation($text-color: $state-danger-text, $border-color: $state-danger-text, $background-color: $state-danger-bg) {
  .dijitInputField {
    color: $text-color;
  }
  &,
  &.dijitTextBoxFocused,
  .dijitArrowButton {
    border-color: $border-color;
  }
  .dijitValidationContainer {
    width: $icon-size-large+$padding-base-vertical*2;
    padding: $padding-base-vertical;
    color: $text-color;
    @include dijit-icons();
    font-size: $icon-size-large;
    line-height: $line-height-computed/$icon-size-large;
    &:before {
      @include icon-get-content(esri-icon-error2);
    }
  }
  .dijitValidationIcon {
    display: none;
  }
}

// Form control focus state
@mixin dijit-form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  border-color: $color;
  outline: 0;
  .dijitArrowButton {
    border-color: $color;
  }
}

// Form control variants
@mixin dijit-form-control-variant($border-color) {
  border-color: $border-color;
  &.dijitTextBoxFocused {
    @include dijit-form-control-focus($border-color);
  }
}

