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

.spinner.skeleton {
	border-radius: 50%;
	@include border($spinner-size / 8, $spinner-color, transparent, transparent, transparent);
	animation: skeleton-animate $speed3x linear infinite;

	&::before{
		border-radius: 50%;
		content: " ";
		@include display-box($spinner-size);
		@include border($spinner-size / 8, transparent, transparent, transparent, $spinner-color);
		position: absolute;
		top: -($spinner-size / 8);
		left: -($spinner-size / 8);
		transform: rotateZ(-30deg);
	}

	&::after {
		border-radius: 50%;
		content: " ";
		@include display-box($spinner-size);
		@include border($spinner-size / 8, transparent, $spinner-color, transparent, transparent);
		position: absolute;
		top: -($spinner-size / 8);
		right: -($spinner-size / 8);
		transform: rotateZ(30deg);
	}
}

@keyframes skeleton-animate {
	0% {
		transform: rotate(0deg);
		opacity: 1;
	}

	50% {
		opacity: .7;
	}

	100% {
		transform: rotate(360deg);
		opacity: 1;
	}
}