/* stylelint-disable value-list-comma-space-after */
/* focus styles */

:focus,
:focus-visible {
	--_o3-focus-rings: var(--o3-focus-use-case-ring-inner),
		var(--o3-focus-use-case-ring-outer);
	--_o3-focus-outline: var(--o3-focus-use-case-outline-color);
}

[data-o3-theme='inverse']:focus,
:where([data-o3-theme='inverse']) :focus,
[data-o3-theme='inverse']:focus-visible,
:where([data-o3-theme='inverse']) :focus-visible {
	--_o3-focus-outline: var(--o3-focus-use-case-outline-inverse-color);
	--_o3-focus-rings: var(--o3-focus-use-case-ring-inverse-inner),
		var(--o3-focus-use-case-ring-inverse-outer);
}

:focus {
	box-shadow: var(--_o3-focus-outline);
	outline: 0;
}

.o3-apply-focus-rings:focus,
button:focus,
[class^='o3'][class*='button']:focus,
input:focus,
select:focus,
textarea:focus {
	box-shadow: var(--_o3-focus-rings);
	outline: 0;
}

@supports selector(:focus-visible) {
	.o3-apply-focus-rings:focus,
	button:focus,
	[class^='o3'][class*='button']:focus,
	input:focus,
	select:focus,
	textarea:focus,
	:focus {
		box-shadow: unset;
	}

	:focus-visible {
		box-shadow: var(--_o3-focus-outline);
		outline: 0;
	}

	.o3-apply-focus-rings:focus-visible,
	button:focus-visible,
	[class^='o3'][class*='button']:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible {
		box-shadow: var(--_o3-focus-rings);
		outline: 0;
	}
}

/* revert focus styles */
.o3-revert-focus:focus-visible,
.o3-revert-focus:focus {
	outline: revert;
	box-shadow: revert;
}
