/*
 * PureCSS.com
 * https://purecss.com/examples/loading-spinner/
 * Three spinner variants — ring, dots, and bars — built entirely with CSS animations.
 */

.demo-loading-spinner .spinner-grid {
		display: flex;
		gap: 2.5rem;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: .5rem;
	}

.demo-loading-spinner .spinner-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .75rem;
	}

.demo-loading-spinner .spinner-label {
		font-size: .75rem;
		color: var(--text-muted);
		font-weight: 500;
	}

/* Ring spinner */

.demo-loading-spinner .spinner-ring {
		width: 40px;
		height: 40px;
		border: 3px solid var(--surface-2);
		border-top-color: var(--accent);
		border-radius: 50%;
		animation: spin-ring 0.8s linear infinite;
	}

/* Dots spinner */

.demo-loading-spinner .spinner-dots {
		display: flex;
		gap: 6px;
		align-items: center;
	}

:is(.demo-loading-spinner .spinner-dots) span {
			width: 10px;
			height: 10px;
			background: var(--accent);
			border-radius: 50%;
			animation: spin-dots 1.2s ease-in-out infinite;
		}

:is(:is(.demo-loading-spinner .spinner-dots) span):nth-child(2) { animation-delay: .2s; }

:is(:is(.demo-loading-spinner .spinner-dots) span):nth-child(3) { animation-delay: .4s; }

/* Bars spinner */

.demo-loading-spinner .spinner-bars {
		display: flex;
		gap: 4px;
		align-items: flex-end;
		height: 36px;
	}

:is(.demo-loading-spinner .spinner-bars) span {
			width: 6px;
			background: var(--accent);
			border-radius: 3px;
			animation: spin-bars 1s ease-in-out infinite;
		}

:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(1) { animation-delay: 0s; }

:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(2) { animation-delay: .15s; }

:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(3) { animation-delay: .3s; }

:is(:is(.demo-loading-spinner .spinner-bars) span):nth-child(4) { animation-delay: .45s; }

/* Orbit spinner */

.demo-loading-spinner .spinner-orbit {
		position: relative;
		width: 40px;
		height: 40px;
		animation: spin-ring .8s linear infinite;
	}

:is(.demo-loading-spinner .spinner-orbit)::before {
			content: '';
			position: absolute;
			inset: 0;
			border: 3px solid transparent;
			border-top-color: var(--sky);
			border-right-color: var(--violet);
			border-radius: 50%;
		}

:is(.demo-loading-spinner .spinner-orbit)::after {
			content: '';
			position: absolute;
			inset: 6px;
			border: 3px solid transparent;
			border-bottom-color: var(--rose);
			border-radius: 50%;
			animation: spin-ring .5s linear infinite reverse;
		}

@keyframes spin-ring {
	to { transform: rotate(360deg); }
}

@keyframes spin-dots {
	0%, 80%, 100% {
		transform: scale(.6);
		opacity: .4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes spin-bars {
	0%, 100% { height: 10px; opacity: .4; }
	50% { height: 36px; opacity: 1; }
}