/*
 * Shared form-control contract.
 *
 * The low-specificity selectors cover native controls without styling button,
 * checkbox, radio, range, file or color inputs. Core and custom blocks may map
 * their own anatomy onto the same component tokens in dedicated adapters.
 */

/*
 * Controls share the surrounding surface and rely on their functional border
 * for recognition. Rebind every surface-dependent role at the form boundary
 * so nested surfaces resolve one coherent local control contract.
 */
:where(form) {
	--wp--custom--component--form-control--background: transparent;
	--wp--custom--component--form-control--border-color: var(--sggw-line-functional);
	--wp--custom--component--form-control--focus-color: var(--sggw-line-focus);
	--wp--custom--component--form-control--foreground: var(--sggw-text);
	--wp--custom--component--form-control--label-color: var(--sggw-text);
	--wp--custom--component--form-control--placeholder: var(--sggw-text-muted);
}

:where(form label) {
	color: var(--wp--custom--component--form-control--label-color);
}

:where(
	input:not(
		[type="button"],
		[type="checkbox"],
		[type="color"],
		[type="file"],
		[type="hidden"],
		[type="image"],
		[type="radio"],
		[type="range"],
		[type="reset"],
		[type="submit"]
	),
	select,
	textarea
) {
	background-color: var(--wp--custom--component--form-control--background);
	border-color: var(--wp--custom--component--form-control--border-color);
	border-radius: var(--wp--custom--radius--small);
	border-style: solid;
	border-width: var(--wp--custom--line--width);
	box-sizing: border-box;
	color: var(--wp--custom--component--form-control--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--line-height--medium);
	min-block-size: var(--sggw-form-control-block-size);
	min-inline-size: 0;
	padding-block: calc(
		var(--wp--preset--spacing--20) -
			var(--wp--custom--line--width)
	);
	padding-inline: var(--wp--preset--spacing--20);
}

:where(
	input:not(
		[type="button"],
		[type="checkbox"],
		[type="color"],
		[type="file"],
		[type="hidden"],
		[type="image"],
		[type="radio"],
		[type="range"],
		[type="reset"],
		[type="submit"]
	),
	textarea
)::placeholder {
	color: var(--wp--custom--component--form-control--placeholder);
	opacity: 1;
}

:where(
	input:not(
		[type="button"],
		[type="checkbox"],
		[type="color"],
		[type="file"],
		[type="hidden"],
		[type="image"],
		[type="radio"],
		[type="range"],
		[type="reset"],
		[type="submit"]
	),
	select,
	textarea
):focus-visible {
	border-color: var(--wp--custom--component--form-control--focus-color);
	outline: var(--wp--custom--line--focus-ring-width) solid
		var(--wp--custom--component--form-control--focus-color);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact);
}

@media (forced-colors: active) {
	:where(
		input:not(
			[type="button"],
			[type="checkbox"],
			[type="color"],
			[type="file"],
			[type="hidden"],
			[type="image"],
			[type="radio"],
			[type="range"],
			[type="reset"],
			[type="submit"]
		),
		select,
		textarea
	) {
		background-color: Field;
		border-color: ButtonBorder;
		color: FieldText;
		forced-color-adjust: none;
	}

	:where(
		input:not(
			[type="button"],
			[type="checkbox"],
			[type="color"],
			[type="file"],
			[type="hidden"],
			[type="image"],
			[type="radio"],
			[type="range"],
			[type="reset"],
			[type="submit"]
		),
		select,
		textarea
	):focus-visible {
		border-color: Highlight;
		outline-color: Highlight;
	}
}