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

.spinner.hue{
	@include display-box($spinner-size / 2);
	background: $spinner-color;
	border-radius: 50%;
	animation: hue-animate $speed3x ease-in-out infinite;

	&::before{
		border-radius: 0% $spinner-size / 4 $spinner-size / 4 0%;
		content: " ";
		@include display-box-wh($spinner-size / 4, $spinner-size / 2);
		background: white;
		position: absolute;
		top: 0;
		right: 0;
		animation: hue-animate-before $speed3x ease-in-out infinite;
	}
}

@keyframes hue-animate{
	0% { background: $spinner-color; }
	25% { background: $spinner-accent; }
	50% { background: $spinner-color; }
	75% { background: $spinner-accent; }
	100% { background: $spinner-color; }
}

@keyframes hue-animate-before{
	0% {
		transform: rotateY(0deg);
		transform-origin: left center;
		opacity: .5;
	}

	30%, 70% {
		transform: rotateY(180deg);
		transform-origin: left center;
		opacity: .2;
	}

	100% {
		transform: rotateY(0deg);
		opacity: .5;
	}
}