/* Skeleton primitives. Put .rd-skeleton on any box for the shimmering grey, plus one shape class
   for the common cases; the component adds its own width/position. One shimmer for every
   placeholder in the app, so skeletons of different components look like one family. */
:root {
	--rd-skeleton-paint: linear-gradient(90deg, var(--rd-gray-100) 0%, var(--rd-gray-200) 50%, var(--rd-gray-100) 100%);
}

.rd-skeleton {
	border-radius: var(--rd-borderradius-border-big);
	background-color: var(--rd-gray-100);
	background-image: var(--rd-skeleton-paint);
	background-size: 300% 100%;
	animation: rd-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Shapes: a line of text, a headline, a big number, a button, a switch */
.rd-skeleton-line {
	height: 16px;
}

.rd-skeleton-line-sm {
	height: 12px;
}

.rd-skeleton-line-lg {
	height: 28px;
}

.rd-skeleton-block {
	height: 52px;
}

.rd-skeleton-pill {
	height: 44px;
	width: 180px;
	border-radius: 40px;
}

.rd-skeleton-switch {
	height: 30px;
	width: 52px;
	flex: none;
	border-radius: 40px;
}

@keyframes rd-skeleton-shimmer {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-skeleton {
		animation: none;
	}
}