.dir-ui-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dir-ui-space-6) var(--dir-ui-space-4);
}

.dir-ui-field {
	min-width: 0;
	display: grid;
	gap: var(--dir-ui-space-2);
}

.dir-ui-field--wide {
	grid-column: 1 / -1;
}

.dir-ui-field label {
	color: var(--dir-ui-color-neutral-700);
	font-family: var(--dir-ui-font-heading);
	font-size: var(--dir-ui-font-size-300);
	font-weight: var(--dir-ui-font-weight-bold);
	line-height: var(--dir-ui-line-height-compact);
}

.dir-ui-field__required {
	color: var(--dir-ui-color-error);
}

.dir-ui-field :where(input, textarea, select) {
	width: 100%;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	color: var(--dir-ui-color-text);
	background: var(--dir-ui-color-background);
	border: var(--dir-ui-border);
	border-radius: var(--dir-ui-radius-sm);
	box-shadow: none;
	transition:
		border-color var(--dir-ui-transition-fast),
		box-shadow var(--dir-ui-transition-fast);
}

.dir-ui-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.dir-ui-field :where(input, textarea, select):hover {
	border-color: var(--dir-ui-color-border-strong);
}

.dir-ui-field :where(input, textarea, select):focus {
	border-color: var(--dir-ui-color-brand-accessible);
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dir-ui-color-brand-primary) 18%, transparent);
}

.dir-ui-field :where(input, textarea)::placeholder {
	color: var(--dir-ui-color-text-muted);
	opacity: 0.78;
}

.dir-ui-field :where(input, textarea)[aria-invalid="true"] {
	border-color: var(--dir-ui-color-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dir-ui-color-error) 14%, transparent);
}

.dir-ui-field__error {
	margin: 0;
	color: var(--dir-ui-color-error);
	font-size: var(--dir-ui-font-size-200);
	font-weight: var(--dir-ui-font-weight-semibold);
}

.dir-ui-field--checkbox label {
	display: flex;
	gap: var(--dir-ui-space-3);
	align-items: flex-start;
	font-family: var(--dir-ui-font-body);
	font-weight: var(--dir-ui-font-weight-regular);
	line-height: var(--dir-ui-line-height-body);
}

.dir-ui-field--checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25rem;
	min-height: 1.25rem;
	margin-top: 0.15rem;
	padding: 0;
	accent-color: var(--dir-ui-color-brand-primary);
}

.dir-ui-field--checkbox a {
	color: var(--dir-ui-color-brand-accessible);
	font-weight: var(--dir-ui-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.dir-ui-form__summary {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.dir-ui-alert {
	margin-bottom: var(--dir-ui-space-6);
	padding: var(--dir-ui-space-4);
	border: 1px solid currentcolor;
	border-radius: var(--dir-ui-radius-sm);
	font-size: var(--dir-ui-font-size-300);
	font-weight: var(--dir-ui-font-weight-semibold);
}

.dir-ui-alert--success {
	color: var(--dir-ui-color-success);
	background: var(--dir-ui-color-success-background);
}

.dir-ui-alert--error {
	color: var(--dir-ui-color-error);
	background: var(--dir-ui-color-error-background);
}

@media (max-width: 767px) {
	.dir-ui-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.dir-ui-field--wide {
		grid-column: auto;
	}
}