.ObSpinner-wrapper,
.ObSpinner-fullPage {
	--bullet-size: 0.5em;
}

.ObSpinner-root {
	display: inline-block;
}

.ObSpinner-fullPage {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100vh;
	width: 100vw;
}

.ObSpinner-spinner {
	display: inline-block;
	height: calc(var(--bullet-size) * 1.5);
	position: relative;
	width: calc(var(--bullet-size) * 5);
}

.ObSpinner-bullet {
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
	background: #666;
	border-radius: 50%;
	height: var(--bullet-size);
	position: absolute;
	top: 0.2rem;
	width: var(--bullet-size);

	&:nth-child(1) {
		animation: scaleAnimation 0.6s infinite ease-in-out;
		left: calc(var(--bullet-size) * 0.5);
	}

	&:nth-child(2) {
		animation: translateAnimation 0.6s infinite ease-in-out;
		left: calc(var(--bullet-size) * 0.5);
	}

	&:nth-child(3) {
		animation: translateAnimation 0.6s infinite ease-in-out;
		left: calc(var(--bullet-size) * 2.4);
	}

	&:nth-child(4) {
		animation: scaleAnimation 0.6s infinite ease-in-out reverse;
		left: calc(var(--bullet-size) * 4);
	}
}

@keyframes scaleAnimation {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes translateAnimation {
	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(calc(var(--bullet-size) * 1.65), 0);
	}
}