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

.spinner.pinwheel {
	border-radius: 50%;
	@include display-box($spinner-size);
	@include border($spinner-size / 2, $spinner-color, $spinner-accent, $spinner-color, $spinner-accent);
	animation: pinwheel-animate $speed3x linear infinite;
}

@keyframes pinwheel-animate {
	0%{
		border-top-color: $spinner-color;
		border-right-color: $spinner-accent;
		border-bottom-color: $spinner-color;
		border-left-color: $spinner-accent;
		transform: rotate(0deg);
	}
	25% {
		border-top-color: $spinner-color;
		border-right-color: $spinner-accent;
		border-bottom-color: $spinner-color;
		border-left-color: $spinner-accent;
	}
	50% {
		border-top-color: $spinner-color;
		border-right-color: $spinner-accent;
		border-bottom-color: $spinner-color;
		border-left-color: $spinner-accent;
	}
	75% {
		border-top-color: $spinner-color;
		border-right-color: $spinner-accent;
		border-bottom-color: $spinner-color;
		border-left-color: $spinner-accent;
	}

	100% {
		border-top-color: $spinner-color;
		border-right-color: $spinner-accent;
		border-bottom-color: $spinner-color;
		border-left-color: $spinner-accent;
		transform: rotate(360deg);
	}
}