.ui-skeleton-line,
.ui-skeleton-circle {
	position: relative;
	overflow: hidden;
	background-color: var(--ui-color-base-6);
}

.ui-skeleton-line {
	width: 100%;
	height: 12px;
	border-radius: 6px;
}

.ui-skeleton-circle {
	border-radius: 50%;
	aspect-ratio: 1/1;
}

.ui-skeleton-line::after,
.ui-skeleton-circle::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 0%, #ededed 50%, transparent 100%);
	animation: ui-skeleton-shimmer 1.5s infinite;
}

@keyframes ui-skeleton-shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}