/*
 * PureCSS.com
 * https://purecss.com/examples/skeleton-loader/
 * Animated placeholder loading state using CSS keyframes.
 */

.demo-skeleton-loader .skeleton-card {
		background: var(--border);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 1rem;
		width: 240px;
		box-shadow: 0 4px 20px rgba(0,0,0,.35);
	}

.demo-skeleton-loader .skel {
		background: linear-gradient(90deg,
			rgba(128,128,128,0.15) 25%,
			rgba(128,128,128,0.35) 50%,
			rgba(128,128,128,0.15) 75%
		);
		background-size: 200% 100%;
		border-radius: 6px;
		animation: shimmer 1.5s infinite;
	}

.demo-skeleton-loader .skel-avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		margin-bottom: .75rem;
	}

.demo-skeleton-loader .skel-line {
		height: 12px;
		margin-bottom: .5rem;
	}

.w-full:is(.demo-skeleton-loader .skel-line) { width: 100%; }

.w-3q:is(.demo-skeleton-loader .skel-line)  { width: 75%; }

.w-half:is(.demo-skeleton-loader .skel-line) { width: 50%; }

body:has(#theme-toggle:checked) .demo-skeleton-loader .skeleton-card {
	background: var(--surface);
}

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}