/**
 * TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
 *
 * @author Luca Bosin <https://github.com/Wombosvideo>
 * @license MIT
 */

:root {
	/* @property declarations for animation variables, to prevent inheritance */
	@property --tw-animation-delay {
		syntax: '*';
		inherits: false;
		initial-value: 0s;
	}

	@property --tw-animation-direction {
		syntax: '*';
		inherits: false;
		initial-value: normal;
	}

	@property --tw-animation-duration {
		syntax: '*';
		inherits: false;
		/* does not have an initial value in order for the `--tw-duration` variable to work */
	}

	@property --tw-animation-fill-mode {
		syntax: '*';
		inherits: false;
		initial-value: none;
	}

	@property --tw-animation-iteration-count {
		syntax: '*';
		inherits: false;
		initial-value: 1;
	}

	@property --tw-enter-blur {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-enter-opacity {
		syntax: '*';
		inherits: false;
		initial-value: 1;
	}

	@property --tw-enter-rotate {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-enter-scale {
		syntax: '*';
		inherits: false;
		initial-value: 1;
	}

	@property --tw-enter-translate-x {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-enter-translate-y {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-exit-blur {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-exit-opacity {
		syntax: '*';
		inherits: false;
		initial-value: 1;
	}

	@property --tw-exit-rotate {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-exit-scale {
		syntax: '*';
		inherits: false;
		initial-value: 1;
	}

	@property --tw-exit-translate-x {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}

	@property --tw-exit-translate-y {
		syntax: '*';
		inherits: false;
		initial-value: 0;
	}
}

@theme inline {
	/* Predefined values */

	--animation-delay-0: 0s;
	--animation-delay-75: 75ms;
	--animation-delay-100: 0.1s;
	--animation-delay-150: 0.15s;
	--animation-delay-200: 0.2s;
	--animation-delay-300: 0.3s;
	--animation-delay-500: 0.5s;
	--animation-delay-700: 0.7s;
	--animation-delay-1000: 1s;

	--animation-repeat-0: 0;
	--animation-repeat-1: 1;
	--animation-repeat-infinite: infinite;

	--animation-direction-normal: normal;
	--animation-direction-reverse: reverse;
	--animation-direction-alternate: alternate;
	--animation-direction-alternate-reverse: alternate-reverse;

	--animation-fill-mode-none: none;
	--animation-fill-mode-forwards: forwards;
	--animation-fill-mode-backwards: backwards;
	--animation-fill-mode-both: both;

	--percentage-0: 0;
	--percentage-5: 0.05;
	--percentage-10: 0.1;
	--percentage-15: 0.15;
	--percentage-20: 0.2;
	--percentage-25: 0.25;
	--percentage-30: 0.3;
	--percentage-35: 0.35;
	--percentage-40: 0.4;
	--percentage-45: 0.45;
	--percentage-50: 0.5;
	--percentage-55: 0.55;
	--percentage-60: 0.6;
	--percentage-65: 0.65;
	--percentage-70: 0.7;
	--percentage-75: 0.75;
	--percentage-80: 0.8;
	--percentage-85: 0.85;
	--percentage-90: 0.9;
	--percentage-95: 0.95;
	--percentage-100: 1;
	--percentage-translate-full: 1;

	/* Animations and keyframes */

	--animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms))
		var(--tw-ease, ease) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);
	--animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms))
		var(--tw-ease, ease) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);

	@keyframes enter {
		from {
			opacity: var(--tw-enter-opacity, 1);
			transform: translate3d(
					var(--tw-enter-translate-x, 0),
					var(--tw-enter-translate-y, 0),
					0
				)
				scale3d(
					var(--tw-enter-scale, 1),
					var(--tw-enter-scale, 1),
					var(--tw-enter-scale, 1)
				)
				rotate(var(--tw-enter-rotate, 0));
			filter: blur(var(--tw-enter-blur, 0));
		}
	}

	@keyframes exit {
		to {
			opacity: var(--tw-exit-opacity, 1);
			transform: translate3d(
					var(--tw-exit-translate-x, 0),
					var(--tw-exit-translate-y, 0),
					0
				)
				scale3d(
					var(--tw-exit-scale, 1),
					var(--tw-exit-scale, 1),
					var(--tw-exit-scale, 1)
				)
				rotate(var(--tw-exit-rotate, 0));
			filter: blur(var(--tw-exit-blur, 0));
		}
	}

	--animate-accordion-down: accordion-down
		var(--tw-animation-duration, var(--tw-duration, 200ms))
		var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);
	--animate-accordion-up: accordion-up
		var(--tw-animation-duration, var(--tw-duration, 200ms))
		var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);
	--animate-collapsible-down: collapsible-down
		var(--tw-animation-duration, var(--tw-duration, 200ms))
		var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);
	--animate-collapsible-up: collapsible-up
		var(--tw-animation-duration, var(--tw-duration, 200ms))
		var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
		var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
		var(--tw-animation-fill-mode, none);

	@keyframes accordion-down {
		from {
			height: 0;
		}
		to {
			height: var(
				--radix-accordion-content-height,
				var(
					--bits-accordion-content-height,
					var(
						--reka-accordion-content-height,
						var(
							--kb-accordion-content-height,
							var(--ngp-accordion-content-height, auto)
						)
					)
				)
			);
		}
	}

	@keyframes accordion-up {
		from {
			height: var(
				--radix-accordion-content-height,
				var(
					--bits-accordion-content-height,
					var(
						--reka-accordion-content-height,
						var(
							--kb-accordion-content-height,
							var(--ngp-accordion-content-height, auto)
						)
					)
				)
			);
		}
		to {
			height: 0;
		}
	}

	@keyframes collapsible-down {
		from {
			height: 0;
		}
		to {
			height: var(
				--radix-collapsible-content-height,
				var(
					--bits-collapsible-content-height,
					var(
						--reka-collapsible-content-height,
						var(--kb-collapsible-content-height, auto)
					)
				)
			);
		}
	}

	@keyframes collapsible-up {
		from {
			height: var(
				--radix-collapsible-content-height,
				var(
					--bits-collapsible-content-height,
					var(
						--reka-collapsible-content-height,
						var(--kb-collapsible-content-height, auto)
					)
				)
			);
		}
		to {
			height: 0;
		}
	}

	--animate-caret-blink: caret-blink 1.25s ease-out infinite;

	@keyframes caret-blink {
		0%,
		70%,
		100% {
			opacity: 1;
		}
		20%,
		50% {
			opacity: 0;
		}
	}
}

/* Utility classes */

@utility animation-duration-* {
	--tw-animation-duration: calc(--value(number) * 1ms);
	--tw-animation-duration: --value(
		--animation-duration- *,
		[duration],
		'initial',
		[ *]
	);
	animation-duration: calc(--value(number) * 1ms);
	animation-duration: --value(
		--animation-duration- *,
		[duration],
		'initial',
		[ *]
	);
}

@utility delay-* {
	animation-delay: calc(--value(number) * 1ms);
	animation-delay: --value(--animation-delay- *, [duration], 'initial', [ *]);
	--tw-animation-delay: calc(--value(number) * 1ms);
	--tw-animation-delay: --value(
		--animation-delay- *,
		[duration],
		'initial',
		[ *]
	);
}

@utility repeat-* {
	animation-iteration-count: --value(
		--animation-repeat- *,
		number,
		'initial',
		[ *]
	);
	--tw-animation-iteration-count: --value(
		--animation-repeat- *,
		number,
		'initial',
		[ *]
	);
}

@utility direction-* {
	animation-direction: --value(--animation-direction- *, 'initial', [ *]);
	--tw-animation-direction: --value(--animation-direction- *, 'initial', [ *]);
}

@utility fill-mode-* {
	animation-fill-mode: --value(--animation-fill-mode- *, 'initial', [ *]);
	--tw-animation-fill-mode: --value(--animation-fill-mode- *, 'initial', [ *]);
}

@utility running {
	animation-play-state: running;
}
@utility paused {
	animation-play-state: paused;
}
@utility play-state-* {
	animation-play-state: --value('initial', [ *]);
}

@utility blur-in {
	--tw-enter-blur: 20px;
}
@utility blur-in-* {
	--tw-enter-blur: calc(--value(number) * 1px);
	--tw-enter-blur: --value(--blur- *, [ *]);
}

@utility blur-out {
	--tw-exit-blur: 20px;
}
@utility blur-out-* {
	--tw-exit-blur: calc(--value(number) * 1px);
	--tw-exit-blur: --value(--blur- *, [ *]);
}

@utility fade-in {
	--tw-enter-opacity: 0;
}
@utility fade-in-* {
	--tw-enter-opacity: calc(--value(number) / 100);
	--tw-enter-opacity: --value(--percentage- *, [ *]);
}

@utility fade-out {
	--tw-exit-opacity: 0;
}
@utility fade-out-* {
	--tw-exit-opacity: calc(--value(number) / 100);
	--tw-exit-opacity: --value(--percentage- *, [ *]);
}

@utility zoom-in {
	--tw-enter-scale: 0;
}
@utility zoom-in-* {
	--tw-enter-scale: calc(--value(number) * 1%);
	--tw-enter-scale: calc(--value(ratio));
	--tw-enter-scale: --value(--percentage- *, [ *]);
}
@utility -zoom-in-* {
	--tw-enter-scale: calc(--value(number) * -1%);
	--tw-enter-scale: calc(--value(ratio) * -1);
	--tw-enter-scale: --value(--percentage- *, [ *]);
}

@utility zoom-out {
	--tw-exit-scale: 0;
}
@utility zoom-out-* {
	--tw-exit-scale: calc(--value(number) * 1%);
	--tw-exit-scale: calc(--value(ratio));
	--tw-exit-scale: --value(--percentage- *, [ *]);
}
@utility -zoom-out-* {
	--tw-exit-scale: calc(--value(number) * -1%);
	--tw-exit-scale: calc(--value(ratio) * -1);
	--tw-exit-scale: --value(--percentage- *, [ *]);
}

@utility spin-in {
	--tw-enter-rotate: 30deg;
}
@utility spin-in-* {
	--tw-enter-rotate: calc(--value(number) * 1deg);
	--tw-enter-rotate: calc(--value(ratio) * 360deg);
	--tw-enter-rotate: --value(--rotate- *, [ *]);
}
@utility -spin-in {
	--tw-enter-rotate: -30deg;
}
@utility -spin-in-* {
	--tw-enter-rotate: calc(--value(number) * -1deg);
	--tw-enter-rotate: calc(--value(ratio) * -360deg);
	--tw-enter-rotate: --value(--rotate- *, [ *]);
}

@utility spin-out {
	--tw-exit-rotate: 30deg;
}
@utility spin-out-* {
	--tw-exit-rotate: calc(--value(number) * 1deg);
	--tw-exit-rotate: calc(--value(ratio) * 360deg);
	--tw-exit-rotate: --value(--rotate- *, [ *]);
}
@utility -spin-out {
	--tw-exit-rotate: -30deg;
}
@utility -spin-out-* {
	--tw-exit-rotate: calc(--value(number) * -1deg);
	--tw-exit-rotate: calc(--value(ratio) * -360deg);
	--tw-exit-rotate: --value(--rotate- *, [ *]);
}

@utility slide-in-from-top {
	--tw-enter-translate-y: -100%;
}
@utility slide-in-from-top-* {
	--tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
	--tw-enter-translate-y: calc(
		--value(--percentage- *, --percentage-translate- *) * -100%
	);
	--tw-enter-translate-y: calc(--value(ratio) * -100%);
	--tw-enter-translate-y: calc(
		--value(--translate- *, [percentage], [length]) * -1
	);
}
@utility slide-in-from-bottom {
	--tw-enter-translate-y: 100%;
}
@utility slide-in-from-bottom-* {
	--tw-enter-translate-y: calc(--value(integer) * var(--spacing));
	--tw-enter-translate-y: calc(
		--value(--percentage- *, --percentage-translate- *) * 100%
	);
	--tw-enter-translate-y: calc(--value(ratio) * 100%);
	--tw-enter-translate-y: --value(--translate- *, [percentage], [length]);
}
@utility slide-in-from-left {
	--tw-enter-translate-x: -100%;
}
@utility slide-in-from-left-* {
	--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
	--tw-enter-translate-x: calc(
		--value(--percentage- *, --percentage-translate- *) * -100%
	);
	--tw-enter-translate-x: calc(--value(ratio) * -100%);
	--tw-enter-translate-x: calc(
		--value(--translate- *, [percentage], [length]) * -1
	);
}
@utility slide-in-from-right {
	--tw-enter-translate-x: 100%;
}
@utility slide-in-from-right-* {
	--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
	--tw-enter-translate-x: calc(
		--value(--percentage- *, --percentage-translate- *) * 100%
	);
	--tw-enter-translate-x: calc(--value(ratio) * 100%);
	--tw-enter-translate-x: --value(--translate- *, [percentage], [length]);
}
@utility slide-in-from-start {
	&:dir(ltr) {
		--tw-enter-translate-x: -100%;
	}
	&:dir(rtl) {
		--tw-enter-translate-x: 100%;
	}
}
@utility slide-in-from-start-* {
	&:where(:dir(ltr), [dir='ltr'], [dir='ltr'] *) {
		--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
		--tw-enter-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * -100%
		);
		--tw-enter-translate-x: calc(--value(ratio) * -100%);
		--tw-enter-translate-x: calc(
			--value(--translate- *, [percentage], [length]) * -1
		);
	}
	&:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {
		--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
		--tw-enter-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * 100%
		);
		--tw-enter-translate-x: calc(--value(ratio) * 100%);
		--tw-enter-translate-x: --value(--translate- *, [percentage], [length]);
	}
}
@utility slide-in-from-end {
	&:dir(ltr) {
		--tw-enter-translate-x: 100%;
	}
	&:dir(rtl) {
		--tw-enter-translate-x: -100%;
	}
}
@utility slide-in-from-end-* {
	&:where(:dir(ltr), [dir='ltr'], [dir='ltr'] *) {
		--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
		--tw-enter-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * 100%
		);
		--tw-enter-translate-x: calc(--value(ratio) * 100%);
		--tw-enter-translate-x: --value(--translate- *, [percentage], [length]);
	}
	&:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {
		--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
		--tw-enter-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * -100%
		);
		--tw-enter-translate-x: calc(--value(ratio) * -100%);
		--tw-enter-translate-x: calc(
			--value(--translate- *, [percentage], [length]) * -1
		);
	}
}

@utility slide-out-to-top {
	--tw-exit-translate-y: -100%;
}
@utility slide-out-to-top-* {
	--tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
	--tw-exit-translate-y: calc(
		--value(--percentage- *, --percentage-translate- *) * -100%
	);
	--tw-exit-translate-y: calc(--value(ratio) * -100%);
	--tw-exit-translate-y: calc(
		--value(--translate- *, [percentage], [length]) * -1
	);
}
@utility slide-out-to-bottom {
	--tw-exit-translate-y: 100%;
}
@utility slide-out-to-bottom-* {
	--tw-exit-translate-y: calc(--value(integer) * var(--spacing));
	--tw-exit-translate-y: calc(
		--value(--percentage- *, --percentage-translate- *) * 100%
	);
	--tw-exit-translate-y: calc(--value(ratio) * 100%);
	--tw-exit-translate-y: --value(--translate- *, [percentage], [length]);
}
@utility slide-out-to-left {
	--tw-exit-translate-x: -100%;
}
@utility slide-out-to-left-* {
	--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
	--tw-exit-translate-x: calc(
		--value(--percentage- *, --percentage-translate- *) * -100%
	);
	--tw-exit-translate-x: calc(--value(ratio) * -100%);
	--tw-exit-translate-x: calc(
		--value(--translate- *, [percentage], [length]) * -1
	);
}
@utility slide-out-to-right {
	--tw-exit-translate-x: 100%;
}
@utility slide-out-to-right-* {
	--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
	--tw-exit-translate-x: calc(
		--value(--percentage- *, --percentage-translate- *) * 100%
	);
	--tw-exit-translate-x: calc(--value(ratio) * 100%);
	--tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
}
@utility slide-out-to-start {
	&:dir(ltr) {
		--tw-exit-translate-x: -100%;
	}
	&:dir(rtl) {
		--tw-exit-translate-x: 100%;
	}
}
@utility slide-out-to-start-* {
	&:where(:dir(ltr), [dir='ltr'], [dir='ltr'] *) {
		--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
		--tw-exit-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * -100%
		);
		--tw-exit-translate-x: calc(--value(ratio) * -100%);
		--tw-exit-translate-x: calc(
			--value(--translate- *, [percentage], [length]) * -1
		);
	}
	&:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {
		--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
		--tw-exit-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * 100%
		);
		--tw-exit-translate-x: calc(--value(ratio) * 100%);
		--tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
	}
}
@utility slide-out-to-end {
	&:dir(ltr) {
		--tw-exit-translate-x: 100%;
	}
	&:dir(rtl) {
		--tw-exit-translate-x: -100%;
	}
}
@utility slide-out-to-end-* {
	&:where(:dir(ltr), [dir='ltr'], [dir='ltr'] *) {
		--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
		--tw-exit-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * 100%
		);
		--tw-exit-translate-x: calc(--value(ratio) * 100%);
		--tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
	}
	&:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {
		--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
		--tw-exit-translate-x: calc(
			--value(--percentage- *, --percentage-translate- *) * -100%
		);
		--tw-exit-translate-x: calc(--value(ratio) * -100%);
		--tw-exit-translate-x: calc(
			--value(--translate- *, [percentage], [length]) * -1
		);
	}
}
