@use './variables' as *;

.#{$prefix}animation-spin {
	animation: #{$prefix}animation-spin 1s linear infinite;
	transform-origin: center center;
}

@keyframes #{$prefix}animation-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.#{$prefix}animation-pulse {
	animation: #{$prefix}animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes #{$prefix}animation-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.#{$prefix}animation-bounce {
	animation: #{$prefix}animation-bounce 1s infinite;
}

@keyframes #{$prefix}animation-bounce {
	0%,
	100% {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
	}
	50% {
		transform: translateY(0);
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	}
}