/* Tooltip */

.tooltip {
	&[data-side='top'][data-state='delayed-open'] {
		animation: fadeInDown 200ms ease-in-out 1;
	}

	&[data-side='bottom'][data-state='delayed-open'] {
		animation: fadeInUp 200ms ease-in-out 1;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -10px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Tag */

.tag {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}

.tag.reveal {
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
}

/* Wiggle */
:root {
	--wiggle-rotate: 10deg;
	--wiggle-reverse-rotate: -10deg;
}

.wiggle {
	animation: wiggle 3s infinite;
	transform-origin: top center;
	width: 20px;
	height: 20px;

	&:hover {
		animation: none;
	}
}

@keyframes wiggle {
	0% {
		transform: rotate(var(--wiggle-rotate-reverse));
	}
	3% {
		transform: rotate(var(--wiggle-rotate));
	}
	6% {
		transform: rotate(var(--wiggle-rotate-reverse));
	}
	9% {
		transform: rotate(var(--wiggle-rotate));
	}
	12% {
		transform: rotate(var(--wiggle-rotate-reverse));
	}
	15% {
		transform: rotate(var(--wiggle-rotate));
	}
	18% {
		transform: rotate(var(--wiggle-rotate-reverse));
	}
	21% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(0deg);
	}
}