@keyframes lqd-loading-skeleton {
	100% {
		transform: translateX(100%);
	}
}

.lqd-loading-skeleton {

	&.lqd-is-loading {

		[data-lqd-skeleton-el] {
			min-height: 1em;
			position: relative;
			overflow: hidden;
			background-color: hsl(var(--foreground) / 10%);

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transform: translateX(-100%);
				background-image: linear-gradient(90deg,
						transparent 0,
						rgb(255 255 255 / 20%) 20%,
						rgb(255 255 255 / 50%) 60%,
						transparent);
				animation: lqd-loading-skeleton 1.5s infinite;
			}
		}
	}
}