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

.spinner.boxes {
	&::before {
		@include display-box($spinner-size / 2);
		content: " ";
		background: $spinner-color;
		position: absolute;
		top: ($spinner-size / 8 * 2);
		left: 0;
		animation: boxes-animate-before $speed3x ease-in-out infinite;
	}

	&::after {
		@include display-box($spinner-size / 2);
		content: " ";
		background: $spinner-color;
		position: absolute;
		top: ($spinner-size / 8 * 2);
		right: 0;
		animation: boxes-animate-after $speed3x ease-in-out infinite;
	}
}

@keyframes boxes-animate-before {
	0% { transform: translateX(-($spinner-size / 2)) rotate(45deg); }
	50% { transform: translateX(-($spinner-size / 6)) rotate(225deg); }
	100% { transform: translateX(-($spinner-size / 2)) rotate(45deg); }
}

@keyframes boxes-animate-after {
	0% { transform: translateX($spinner-size / 2) rotate(45deg); }
	50% { transform: translateX($spinner-size / 6) rotate(-225deg); }
	100% { transform: translateX($spinner-size / 2) rotate(45deg); }
}