$focus-ring-animation-name: clay-focus-ring !default;
$focus-ring-animation-duration: 1s !default;
$focus-ring-animation-timing-function: cubic-bezier(0.2, 0, 0, 1) !default;
$focus-ring-animation: $focus-ring-animation-name $focus-ring-animation-duration
	$focus-ring-animation-timing-function !default;

$focus-ring-animation-from-box-shadow:
	0 0 0 0.25rem $white,
	0 0 0 0.75rem $primary-l2 !default;
$focus-ring-animation-to-box-shadow:
	0 0 0 0.125rem $white,
	0 0 0 0.25rem $primary-l0 !default;

@keyframes #{$focus-ring-animation-name} {
	0%,
	50% {
		box-shadow: $focus-ring-animation-from-box-shadow;
	}

	100% {
		box-shadow: $focus-ring-animation-to-box-shadow;
	}
}

@if $enable-prefers-reduced-motion-media-query {
	@media (prefers-reduced-motion: reduce) {
		@keyframes #{$focus-ring-animation-name} {
			0%,
			60% {
				box-shadow: $focus-ring-animation-from-box-shadow;
			}

			61% {
				box-shadow: $focus-ring-animation-to-box-shadow;
			}
		}
	}
}

.c-prefers-focus-ring {
	.custom-control-input:focus-visible ~ .custom-control-label::after,
	.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
	:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
	.focus {
		animation: $focus-ring-animation;
		box-shadow: $focus-ring-animation-to-box-shadow;
	}

	:focus-visible:not(.c-horizontal-resizer):not(.toggle-switch-check):not(
			.custom-control-input
		),
	.focus {
		position: relative;
		z-index: 1;
	}

	&.c-tab-returning,
	&.c-prefers-reduced-motion {
		.custom-control-input:focus-visible ~ .custom-control-label::after,
		.toggle-switch-check:focus-visible ~ .toggle-switch-bar::before,
		:focus-visible:not(.custom-control-input):not(.toggle-switch-check),
		.focus {
			animation: none;
		}
	}
}