/**
 * Homepage "The Collection": loading state of the in-place genre
 * switch (WI-0433; home-collection-view.js).
 *
 * The same treatment as the shop grid's filter loading (catalog-filters
 * style.scss): the cards dim and a ring spinner turns over the top of the
 * results until the new genre lands. Theme tokens only. Under reduced
 * motion there is no animation: the cards dim and a static "Loading…"
 * label shows instead of the spinner. Front page only (enqueued by
 * home-collection.php).
 */

.skyline-home-collection {
	position: relative;
}

.skyline-home-collection .wc-block-product-template,
.skyline-home-collection__more {
	transition: opacity var(--wp--custom--motion--fast) ease;
}

.skyline-home-collection.is-switching .wc-block-product-template,
.skyline-home-collection.is-switching .wp-block-woocommerce-product-collection-no-results,
.skyline-home-collection.is-switching .skyline-home-collection__more {
	opacity: 0.35;
	pointer-events: none;
}

.skyline-home-collection__loader {
	display: none;
	position: absolute;
	z-index: 3;
	top: calc(var(--skyline-hc-top, 0px) + var(--wp--preset--spacing--90));
	left: 0;
	right: 0;
	justify-content: center;
	pointer-events: none;
}

.skyline-home-collection.is-switching .skyline-home-collection__loader {
	display: flex;
}

.skyline-home-collection__spinner {
	width: var(--wp--preset--spacing--70);
	height: var(--wp--preset--spacing--70);
	border: 2px solid var(--wp--preset--color--rule);
	border-top-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--full);
	animation: skyline-home-collection-spin 0.8s linear infinite;
}

.skyline-home-collection__loading {
	display: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--pill);
}

/* The polite status line the result is announced in: read, not shown. */
.skyline-home-collection__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@keyframes skyline-home-collection-spin {

	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.skyline-home-collection .wc-block-product-template,
	.skyline-home-collection__more {
		transition: none;
	}

	.skyline-home-collection__spinner {
		display: none;
	}

	.skyline-home-collection__loading {
		display: inline-block;
	}
}