/* GOV.UK-style inline field validation — see docs/FORM_VALIDATION.md */

.field-validation-group {
  position: relative;
}

.field-validation-group--error {
  padding-left: 0.75rem;
  border-left: 4px solid var(--error);
}

.field-validation-error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--error);
}

.field-validation-group .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dob-input-part--error .dob-input-part-label {
  color: var(--error);
  font-weight: 700;
}

.field-validation-group input[aria-invalid="true"],
.field-validation-group select[aria-invalid="true"],
.field-validation-group textarea[aria-invalid="true"],
.dob-input-part-field[aria-invalid="true"] {
  border: 2px solid var(--error);
}

.field-validation-group input[aria-invalid="true"]:focus,
.field-validation-group select[aria-invalid="true"]:focus,
.field-validation-group textarea[aria-invalid="true"]:focus,
.dob-input-part-field[aria-invalid="true"]:focus {
  border-color: var(--error);
  outline-color: var(--error);
}

.dob-input--has-error {
  padding-left: 0.75rem;
  border-left: 4px solid var(--error);
}

.dob-input-error,
.field-validation-error.dob-input-error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--error);
}

.budget-form input[aria-invalid="true"],
.budget-form select[aria-invalid="true"],
.fp-item-body input[aria-invalid="true"],
.fp-item-body select[aria-invalid="true"] {
  border: 2px solid var(--error);
}

.budget-form label.field-validation-group--error,
.fp-item-body label.field-validation-group--error {
  padding-left: 0.75rem;
  border-left: 4px solid var(--error);
}

.budget-form input[aria-invalid="true"]:focus,
.budget-form select[aria-invalid="true"]:focus,
.fp-item-body input[aria-invalid="true"]:focus,
.fp-item-body select[aria-invalid="true"]:focus {
  border-color: var(--error);
  outline-color: var(--error);
}