// Mettre les champs en rouge lors d'une erreur dans les formulaires Angular
.ng-control, // classe générique pour composant angular valueAccessor correspondant a un champ de formulaire custom
textarea,
input:not([input="radio"]):not([input="checkbox"]) {
  &.ng-invalid.ng-touched.ng-dirty {
      @include make-input-border-error-default();
    }

  &:hover.ng-invalid.ng-touched.ng-dirty,
  &:focus.ng-invalid.ng-touched.ng-dirty {
      @include make-input-border-error-hover()
    }
}

// Le cas des choice_button
.choice_button {
  &.ng-invalid.ng-touched.ng-dirty label {
      @include make-input-border-error-default();
  }

  &.ng-invalid.ng-touched.ng-dirty label:hover {
      @include make-input-border-error-hover()
  }
}

// Le cas des [input="checkbox"] & [input="radio"]
[role="radiogroup"],
[role="group"] {
  &.ng-invalid.ng-touched.ng-dirty label:before {
    @include make-input-border-error-default();
  }
  &.ng-invalid.ng-touched.ng-dirty label:hover:before {
    @include make-input-border-error-hover()
  }
}


  // implémentation Date2 et Date3 et .ng-control lorsque le composant est en erreur
input {
  .ng-control.ng-invalid.ng-touched.ng-dirty &,
  .date2.ng-invalid.ng-touched.ng-dirty &,
  .date3.ng-invalid.ng-touched.ng-dirty & {
      @include make-input-border-error-default();
  }

  .date2.ng-invalid.ng-touched.ng-dirty &:hover,
  .date2.ng-invalid.ng-touched.ng-dirty &:focus,
  .date3.ng-invalid.ng-touched.ng-dirty &:hover,
  .date3.ng-invalid.ng-touched.ng-dirty &:focus {
      @include make-input-border-error-hover()
  }
}

// Text sous les champs
.date2.ng-invalid.ng-touched.ng-dirty label,
.date3.ng-invalid.ng-touched.ng-dirty label {
  color: var(--dt-input-border_color-error_default);
}

.input_select {
  &.ng-invalid.ng-touched.ng-dirty {
    @include make-input-border-error-default();
  }

  &:focus-within.ng-invalid.ng-touched.ng-dirty {
    @include make-input-border-error-hover()
  }

}