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

$cadmin-focus-ring-animation-from-box-shadow:
	0 0 0 4px $cadmin-white,
	0 0 0 12px $cadmin-primary-l2 !default;
$cadmin-focus-ring-animation-to-box-shadow:
	0 0 0 2px $cadmin-white,
	0 0 0 4px $cadmin-primary-l0 !default;

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

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

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

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

	html#{$cadmin-selector} .c-prefers-focus-ring .cadmin {
		.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: $cadmin-focus-ring-animation;
			box-shadow: $cadmin-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;
		}
	}

	html#{$cadmin-selector} .c-prefers-focus-ring.c-tab-returning .cadmin,
	html#{$cadmin-selector}
		.c-prefers-reduced-motion.c-prefers-focus-ring
		.cadmin {
		.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;
		}
	}
}