/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea,
[data-validate].is--error select{
  border-color: #FF4C24;
}

[data-validate].is--error .form-field-icon.is--error,
[data-validate].is--error .radiocheck-field-icon.is--error{
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success,
[data-validate].is--success .radiocheck-field-icon.is--success{
  opacity: 1;
}

/* Field: Custom Radio or Checkbox */
[data-form-validate] .radiocheck-field input:focus-visible ~ .radiocheck-custom {
  background-color: var(--color--accent-blue);
  color: var(--color--background-secondary);
}

[data-form-validate] .radiocheck-field input:focus-visible:checked ~ .radiocheck-custom,
[data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom {
  background-color: var(--color--accent-blue);
  color: var(--color--background-secondary);
}

[data-form-validate] .radiocheck-field .radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .radiocheck-custom {
  border-color: #FF4C24; 
}

[data-validate].is--error input:checked ~ .radiocheck-custom {
  border-color: var(--color--foreground-primary);
}

/* Field: Select */
[data-form-validate] select:has(option[value=""]:checked) {
  color: var(--color--primary-placeholder);
}