@use 'sass:list';

@mixin a11y-focus-ring-outline($inset: false) {
	$inset-value: if($inset, 'inset', '');

	outline: 0;
	box-shadow: 0 0 0 .2rem var(--a11y-focus-ring-color, color-mix(in srgb, var(--color-primary-500) 20%, transparent)) #{$inset-value};
	border-width: var(--a11y-focus-border-width, 1px);
	border-color: var(--a11y-focus-border-color, var(--color-primary-500));
}

@mixin a11y-focus-transitions($additional-transitions...) {
	$default-transitions:
		border-color var(--duration-ultra-fast) var(--smoothstep),
		box-shadow var(--duration-ultra-fast) var(--smoothstep);

	@if list.length($additional-transitions) > 0 {
		transition: $default-transitions, $additional-transitions;
	} @else {
		transition: $default-transitions;
	}
}

@mixin a11y-keyboard-focus-ring($with-transition: true, $inset: false, $additional-transitions...) {
	@if $with-transition {
		@include a11y-focus-transitions($additional-transitions...);
	}

	&:focus-visible {
		@include a11y-focus-ring-outline($inset);
	}
}
