@use '../context' as *;
@use 'sass:string';

:where(:host, :root, .theme) {
	// animation
	@media (prefers-reduced-motion: no-preference) {
		// transition-property
		@include spread-map-into-props(
			$transition-property,
			$prefix: transition-property
		);

		// duration
		@include spread-map-into-props(
			$transition-duration-delay,
			$prefix: duration
		);

		// ease
		@include spread-map-into-props(
			$transition-timing-function,
			$prefix: ease
		);

		// animation
		@include spread-map-into-props($animation, animation);

		// transition
		@each $property, $value in $transition-property {
			@if $property != 'none' {
				$transition: '';

				@each $prop in str-split($value, ', ') {
					$transition: $transition +
						$prop +
						' var(--duration-300) var(--ease-in-out), ';
				}

				$transition: string.slice($transition, 1, -3);

				--transition-#{$property}: #{$transition};
			} @else {
				--transition-#{$property}: none;
			}
		}
	}
}

// keyframes
@keyframes indeterminate {
	0% {
		scale: 0 1;
	}

	50% {
		scale: 1;
		transform-origin: left;
	}

	51% {
		scale: 1;
		transform-origin: center right;
	}

	100% {
		scale: 0 1;
		transform-origin: center right;
	}
}

@keyframes spin {
	from {
		rotate: 0deg;
	}

	to {
		rotate: 360deg;
	}
}

@keyframes ping {
	75%,
	100% {
		scale: 2;
		opacity: 0;
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes bounce {
	0%,
	100% {
		translate: 0 -25%;
		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
	}

	50% {
		translate: 0;
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	}
}

@keyframes progress-indeterminate {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@keyframes pie-masks {
	0% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

@keyframes fade-out {
	95% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes shine {
	to {
		background-position-x: -200%;
	}
}

@keyframes clippath {
	0%,
	100% {
		clip-path: inset(0 0 95% 0);
	}

	25% {
		clip-path: inset(0 95% 0 0);
	}

	50% {
		clip-path: inset(95% 0 0 0);
	}

	75% {
		clip-path: inset(0 0 0 95%);
	}
}