/* Focus State
 -------------------------- */

@mixin focus-ring {
	outline: var(--focus--border-width) solid var(--focus--outline-color);
}

@mixin focus-ring-with-border {
	outline: var(--focus--border-width) solid var(--focus--outline-color);
	border-color: var(--focus--border-color);
}

@mixin focus-visible-ring {
	&:focus-visible {
		@include focus-ring;
	}
}

@mixin focus-within-ring {
	&:focus-within {
		@include focus-ring;
	}
}

@mixin focus-ring-offset {
	outline: var(--focus--border-width) solid var(--focus--border-color);
	outline-offset: var(--spacing--5xs);
}

@mixin focus-visible-ring-offset {
	&:focus-visible {
		@include focus-ring-offset;
	}
}