:where(.focus-ring),
:where(:enabled) {
	outline: 0px solid transparent;
	outline-offset: var(--g-focus-ring-offset-default);
	transition-duration: var(--g-animation-move-quick);
	transition-property: outline-color, width;
}

:where(.focus-ring):focus-visible,
:where(:enabled):focus-visible {
	outline: var(--g-focus-ring-width-default) solid
		var(--g-focus-ring-color-default);
}

@media (prefers-contrast: more) {
	:where(.focus-ring):focus-visible,
	:where(:enabled):focus-visible {
		outline: var(--g-focus-ring-width-default) solid
			var(--g-focus-ring-color-contrast);
		box-shadow: 0 0 0
			calc(
				(
					var(--g-focus-ring-width-default) +
					var(--g-focus-ring-offset-default)
				) *
				1.5
			)
			var(--g-focus-ring-color-contrast-shadow);
	}
}