@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

@if (tokens.$focus-visible-use-polyfill) {
	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
	.js-focus-visible .default-focus *:focus:not(.focus-visible) {
		outline: none;
	}

	.focus-visible.has-inner-focus,
	.focus-visible.inner-focus {
		outline-offset: -(tokens.$focus-width);
	}

	.has-default-focus,
	.default-focus {
		.is-focused,
		.focus-visible {
			@extend %focus;

			&.has-inner-focus,
			&.inner-focus {
				outline-color: currentColor;
			}
		}
	}
} @else {
	.has-default-focus *:focus-visible,
	.default-focus *:focus-visible {
		@extend %focus;

		&.has-inner-focus,
		&.inner-focus {
			outline-color: currentColor;
			outline-offset: -(tokens.$focus-width);
		}
	}
}

:where(.is-focused) {
	@extend %focus;

	&.has-inner-focus,
	&.inner-focus {
		outline-color: currentColor;
		outline-offset: -(tokens.$focus-width);
	}
}