@import "../variables";
@import "../globals";

.spinner.flip {
	transform-style: preserve-3d;
	perspective: 10em;

	&::before{
		@include display-box($spinner-size);
		background: $spinner-color;
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		animation: flip-animate-before $speed2x linear infinite;
	}
}

@keyframes flip-animate-before {
	0% { transform: rotateY(0deg) rotateX(0deg); }
	25% { transform: rotateY(360deg) rotateX(0deg); }
	50% { transform: rotateY(360deg) rotateX(360deg); }
	75% { transform: rotateY(0deg) rotateX(360deg); }
	100% { transform: rotateY(0deg) rotateX(0deg); }
}