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

// stylelint-disable declaration-block-no-redundant-longhand-properties
@mixin focus() {
	outline-color: inherit;
	outline-offset: tokens.$focus-outline-offset;
	outline-style: tokens.$focus-style;
	outline-width: tokens.$focus-width;
}

%focus {
	@include focus();
}

@mixin focus-visible {
	@if (tokens.$focus-visible-use-polyfill) {
		&.focus-visible {
			@content;
		}
	} @else {
		&:focus-visible {
			@content;
		}
	}
}