.components-animate__appear {
	animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
	animation-fill-mode: forwards;
	@include reduce-motion("animation");

	&.is-from-top,
	&.is-from-top.is-from-left {
		transform-origin: top left;
	}
	&.is-from-top.is-from-right {
		transform-origin: top right;
	}
	&.is-from-bottom,
	&.is-from-bottom.is-from-left {
		transform-origin: bottom left;
	}
	&.is-from-bottom.is-from-right {
		transform-origin: bottom right;
	}
}

@keyframes components-animate__appear-animation {
	from {
		transform: translateY(-2em) scaleY(0) scaleX(0);
	}
	to {
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

.components-animate__slide-in {
	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
	animation-fill-mode: forwards;
	@include reduce-motion("animation");

	&.is-from-left {
		transform: translateX(+100%);
	}

	&.is-from-right {
		transform: translateX(-100%);
	}
}

@keyframes components-animate__slide-in-animation {
	100% {
		transform: translateX(0%);
	}
}

.components-animate__loading {
	animation: components-animate__loading 1.6s ease-in-out infinite;
}

@keyframes components-animate__loading {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}