/**
 * Accessibility: the message accessibility.js puts under a Breakdance form field, and the field's
 * border in the same colour. The colours come from the settings, as custom properties on :root
 * (frontend.php).
 *
 * A form designed in Breakdance sets its fields' border with four classes, (0,4,0), and its focus
 * state with three plus :focus. :not(#ds-a11y), an id that no element has, matches every field and
 * gives the border rules the weight of an id, (1,2,1), so they win without !important, also while
 * the field has focus.
 */

/* A line high from the start, so the text that follows a moment later does not move the page again. */
.ds-a11y-message {
	position: relative;
	display: block;
	min-height: 1.4em;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.breakdance-form-field.ds-a11y-invalid .ds-a11y-message {
	color: var(--ds-a11y-error);
}

.breakdance-form-field.ds-a11y-valid .ds-a11y-message {
	color: var(--ds-a11y-valid);
}

.breakdance-form-field.ds-a11y-invalid :is(input, select, textarea):not(#ds-a11y) {
	border-color: var(--ds-a11y-error);
}

.breakdance-form-field.ds-a11y-valid :is(input, select, textarea):not(#ds-a11y) {
	border-color: var(--ds-a11y-valid);
}

/* What a screen reader hears: the field's name and the message, out of sight. */
.ds-a11y-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}