/**
 * Form controls and validation states shared by WordPress and WooCommerce.
 */

:where(.boopi-field, .form-row, .woocommerce-form-row) {
	display: flex;
	flex-direction: column;
	gap: var(--boopi-space-2);
	margin-block: 0 var(--boopi-space-5);
	min-inline-size: 0;
}

:where(.boopi-field__label, .form-row > label, .woocommerce-form-row > label) {
	color: var(--boopi-color-heading);
	display: block;
	font-weight: var(--boopi-font-weight-semibold);
}

:where(.required, .boopi-field__required) {
	color: var(--boopi-color-error);
	font-weight: var(--boopi-font-weight-bold);
	text-decoration: none;
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	.input-text,
	select,
	textarea
) {
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width-strong) solid var(--boopi-color-border-strong);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-text);
	font: inherit;
	inline-size: 100%;
	line-height: var(--boopi-line-height-control);
	max-inline-size: 100%;
	min-block-size: var(--boopi-size-control-min);
	padding: var(--boopi-space-3);
	transition:
		background-color var(--boopi-motion-fast) var(--boopi-ease-standard),
		border-color var(--boopi-motion-fast) var(--boopi-ease-standard),
		box-shadow var(--boopi-motion-fast) var(--boopi-ease-standard);
}

textarea {
	min-block-size: 8rem;
	resize: vertical;
}

select {
	padding-inline-end: var(--boopi-space-6);
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	.input-text,
	select,
	textarea
)::placeholder {
	color: var(--boopi-color-text-muted);
	opacity: 1;
}

@media (hover: hover) {
	:where(
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="tel"],
		input[type="number"],
		input[type="search"],
		input[type="url"],
		input[type="date"],
		.input-text,
		select,
		textarea
	):not(:disabled, [readonly]):hover {
		border-color: var(--boopi-color-action);
	}
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	.input-text,
	select,
	textarea
):focus-visible {
	border-color: var(--boopi-color-focus);
	box-shadow: 0 0 0 var(--boopi-border-width-strong) var(--boopi-color-surface-accent);
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	.input-text,
	select,
	textarea
):disabled {
	background: var(--boopi-color-disabled-surface);
	border-color: var(--boopi-color-border);
	color: var(--boopi-color-disabled-text);
	cursor: not-allowed;
	opacity: 1;
}

:where(
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	.input-text,
	textarea
)[readonly] {
	background: var(--boopi-color-surface-subtle);
	border-style: dashed;
	color: var(--boopi-color-text-muted);
}

:where(input, select, textarea):autofill {
	border-color: var(--boopi-color-focus);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--boopi-color-action);
	block-size: var(--boopi-size-icon-md);
	flex: 0 0 auto;
	inline-size: var(--boopi-size-icon-md);
	margin: 0;
}

:where(
	.boopi-choice,
	.checkbox,
	.woocommerce-form__label-for-checkbox,
	label:has(> input[type="checkbox"]),
	label:has(> input[type="radio"])
) {
	align-items: flex-start;
	cursor: pointer;
	display: inline-flex;
	gap: var(--boopi-space-2);
	min-block-size: var(--boopi-size-control-min);
	padding-block: var(--boopi-space-2);
}

:where(
	.boopi-choice,
	.checkbox,
	.woocommerce-form__label-for-checkbox,
	label:has(> input[type="checkbox"]),
	label:has(> input[type="radio"])
):has(input:disabled) {
	color: var(--boopi-color-disabled-text);
	cursor: not-allowed;
}

.boopi-field__description,
.description,
.form-row .optional {
	color: var(--boopi-color-text-muted);
	font-size: var(--boopi-font-size-sm);
}

.boopi-field__message {
	align-items: flex-start;
	display: flex;
	font-size: var(--boopi-font-size-sm);
	gap: var(--boopi-space-2);
}

.boopi-field__message::before {
	content: "!";
	font-weight: var(--boopi-font-weight-bold);
}

:where(
	.boopi-field--error,
	.woocommerce-invalid,
	.boopi-field:has(> [aria-invalid="true"])
) :where(input, select, textarea),
:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):user-invalid {
	background: var(--boopi-color-error-surface);
	border-color: var(--boopi-color-error);
}

:where(.boopi-field--error, .woocommerce-invalid) .boopi-field__message,
.boopi-field__message--error {
	color: var(--boopi-color-error);
}

:where(.boopi-field--warning) :where(input, select, textarea) {
	background: var(--boopi-color-warning-surface);
	border-color: var(--boopi-color-warning);
}

.boopi-field__message--warning {
	color: var(--boopi-color-warning);
}

:where(.boopi-field--success, .woocommerce-validated) :where(input, select, textarea) {
	background: var(--boopi-color-success-surface);
	border-color: var(--boopi-color-success);
}

.boopi-field__message--success {
	color: var(--boopi-color-success);
}

.boopi-error-summary {
	background: var(--boopi-color-error-surface);
	border: var(--boopi-border-width-strong) solid var(--boopi-color-error);
	border-radius: var(--boopi-radius-md);
	color: var(--boopi-color-text);
	margin-block-end: var(--boopi-space-6);
	padding: var(--boopi-space-5);
}

.boopi-error-summary:focus {
	outline: var(--boopi-border-width-strong) solid var(--boopi-color-focus);
	outline-offset: var(--boopi-space-1);
}

.boopi-error-summary > :first-child {
	margin-block-start: 0;
}

.boopi-error-summary > :last-child {
	margin-block-end: 0;
}

.select2-container {
	max-inline-size: 100%;
}

.select2-container .select2-selection--single {
	align-items: center;
	background: var(--boopi-color-surface);
	border: var(--boopi-border-width-strong) solid var(--boopi-color-border-strong);
	border-radius: var(--boopi-radius-md);
	display: flex;
	min-block-size: var(--boopi-size-control-min);
}

:where(form, .boopi-form)[aria-busy="true"] {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	:where(input, select, textarea) {
		transition: none;
	}
}

@media (forced-colors: active) {
	:where(input, select, textarea) {
		border-color: FieldText;
	}

	:where(input, select, textarea)[aria-invalid="true"] {
		border-style: double;
	}
}