.loading {
	&__animation {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__animation__bounce {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		margin: 2px;
		animation: loading-bouncedelay 1.4s infinite ease-in-out both;
		animation-delay: -0.32s;
		border-radius: 100%;
		background-color: var(--loading-bounce-color-light);

		@media (prefers-color-scheme: dark) {
			background: var(--loading-bounce-color-dark);
		}
	}

	&__animation__bounce--medium {
		display: inline-block;
		width: 1.25rem;
		height: 1.25rem;
	}

	&__animation__bounce--large {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
	}

	&__animation__bounce + &__animation__bounce {
		animation-delay: -0.16s;
	}

	&__animation__bounce + &__animation__bounce + &__animation__bounce {
		animation-delay: 0s;
	}
}

@keyframes loading-bouncedelay {
	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}