@import 'src/Components/GlobalStyles/mixins';

.loadingContainer {
	text-align: center;

	@include positionAbsoluteCenter;
}

.spinner {
	position: relative;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto;
}

.spinner::before,
.spinner::after {
	border: 8.6px solid var(--primary-color);
	border-radius: 50%;
	position: absolute;
	content: '';
	display: block;
}

.spinner::before {
	width: 43.2px;
	height: 43.2px;
	border-bottom-color: transparent;
	border-left-color: transparent;
	animation: spinner-1o3y8q 1.05s infinite linear reverse;
}

.spinner::after {
	animation: spinner-1o3y8q 0.7s infinite linear;
	height: 72px;
	width: 72px;
	border-right-color: transparent;
	border-top-color: transparent;
}

@keyframes spinner-1o3y8q {
	to {
		transform: rotate(360deg);
	}
}