/**
 * Skeleton loading states.
 *
 * Shimmering placeholders shown while content loads: product and post images,
 * extra blog posts, the quick view popup and the header cart count.
 */

:root {
	--cb-skeleton-base: #eceef1;
	--cb-skeleton-shine: rgba(255, 255, 255, 0.65);
	--cb-skeleton-radius: 6px;
}

@keyframes cb-skeleton-shimmer {
	0% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

.cb-skeleton,
img.cb-skeleton {
	background-color: var(--cb-skeleton-base);
	background-image: linear-gradient(100deg, transparent 20%, var(--cb-skeleton-shine) 50%, transparent 80%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: cb-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Images keep their dominant colour (from the Dominant Color plugin) under the shine. */
img.cb-skeleton[data-dominant-color] {
	background-color: var(--dominant-color, var(--cb-skeleton-base));
}

/* Placeholder pieces */
.cb-sk-box {
	display: block;
	width: 100%;
	border-radius: var(--cb-skeleton-radius);
}

.cb-sk-line {
	display: block;
	height: 14px;
	margin: 0 0 12px;
	border-radius: 7px;
}

.cb-sk-line.is-title {
	height: 22px;
	margin-bottom: 18px;
}

/* Blog cards added while more posts load */
.cb-skeleton-card .post-desc-wrapper {
	padding-top: 20px;
}

.cb-skeleton-card .cb-sk-box {
	aspect-ratio: 960 / 750;
}

/* Quick view popup while the product loads */
.mfn-popup-quickview.cb-qv-loading .mfn-popup-content-photos .cb-sk-box {
	aspect-ratio: 1 / 1;
}

.mfn-popup-quickview.cb-qv-loading .mfn-popup-content-text-wrapper {
	padding: 30px;
}

/* Header cart count and total while WooCommerce refreshes them */
html.cb-cart-pending .header-cart-count,
html.cb-cart-pending .header-cart-total {
	color: transparent !important;
	background-color: var(--cb-skeleton-base) !important;
	background-image: linear-gradient(100deg, transparent 20%, var(--cb-skeleton-shine) 50%, transparent 80%) !important;
	background-size: 200% 100% !important;
	animation: cb-skeleton-shimmer 1.4s ease-in-out infinite;
}

html.cb-cart-pending .header-cart-total {
	border-radius: 4px;
	min-width: 48px;
}

@media (prefers-reduced-motion: reduce) {
	.cb-skeleton,
	img.cb-skeleton,
	html.cb-cart-pending .header-cart-count,
	html.cb-cart-pending .header-cart-total {
		animation: none;
	}
}