/* FOCUS01: shared surface-aware keyboard focus foundation. */

/*
 * Components keep ownership of their shape and choose one of the three
 * system offsets. These low-specificity rules provide a safe fallback for
 * native controls and content that has no dedicated adapter.
 */
:where(.wp-site-blocks, .editor-styles-wrapper)
	:where(
		a,
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[tabindex]:not([tabindex="-1"])
	):focus:not(:focus-visible) {
	outline: none;
}

:where(.wp-site-blocks, .editor-styles-wrapper)
	:where(
		a,
		button,
		input:not([type="hidden"]),
		select,
		textarea,
		summary,
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
	border-radius: var(--wp--custom--radius--x-small);
	outline: var(--wp--custom--line--focus-ring-width) solid
		var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact);
}

:where(.wp-site-blocks, .editor-styles-wrapper)
	:where(button, summary):focus-visible {
	outline-offset: var(--wp--custom--line--focus-ring-offset);
}

/* RichText and other contenteditable fields already expose their editing state
 * through the caret and the selected-block outline. Do not mistake editing
 * focus for keyboard focus on the rendered component. */
.editor-styles-wrapper
	[contenteditable]:not([contenteditable="false"]):focus:not(:focus-visible),
.editor-styles-wrapper
	[contenteditable]:not([contenteditable="false"]):focus-visible,
.editor-styles-wrapper
	.wp-block-sggw-link
	> .wp-block-sggw-link__anchor:focus-within {
	box-shadow: none !important;
	outline: none !important;
}

@media (forced-colors: active) {
	:where(.wp-site-blocks, .editor-styles-wrapper)
		:where(
			a,
			button,
			input:not([type="hidden"]),
			select,
			textarea,
			summary,
			[tabindex]:not([tabindex="-1"])
		):focus-visible {
		outline-color: Highlight;
	}
}