@keyframes focusAnimation {
	0% {
		outline-width: 3px;
	}
	50% {
		outline-width: 6px;
	}
	100% {
		outline-width: 3px;
	}
}

@keyframes focusAnimationInset {
	0% {
		outline-offset: -3px;
		outline-width: 3px;
	}
	50% {
		outline-offset: -6px;
		outline-width: 6px;
	}
	100% {
		outline-offset: -3px;
		outline-width: 3px;
	}
}

.np-focus-ring:focus-visible {
	outline-style: solid;
	outline-color: var(--np-color-secondary);
	outline-width: 3px;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
	.np-focus-ring:focus-visible {
		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
	}
}