/*
 * Liste d'items partagée par les blocs à répéteur : grille ou carrousel.
 * --bank-columns vient de bank_items_attributes(). Uniquement des variables générées par theme.json.
 */

.bank-items {
	--bank-gap: var(--wp--preset--spacing--50);
	--bank-item-min: 15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Au plus --bank-columns colonnes ; moins dès qu'un item passerait sous --bank-item-min. */
.bank-items--grid {
	display: grid;
	gap: var(--bank-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, max(var(--bank-item-min), (100% - (var(--bank-columns) - 1) * var(--bank-gap)) / var(--bank-columns))), 1fr)
	);
}

/* Carrousel : défilement natif avec accrochage, utilisable au clavier, au doigt et à la molette. */
.bank-items--carousel {
	display: flex;
	gap: var(--bank-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--30);
}

.bank-items--carousel > * {
	flex: 0 0 max(min(85%, var(--bank-item-min)), (100% - (var(--bank-columns) - 1) * var(--bank-gap)) / var(--bank-columns));
	scroll-snap-align: start;
}

.bank-items--carousel:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.bank-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.bank-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--bank--control-height);
	height: var(--wp--custom--bank--control-height);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: border-color 150ms ease-out;
}

.bank-carousel__button:hover:not(:disabled) {
	border-color: currentColor;
}

.bank-carousel__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.bank-carousel__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.bank-carousel__button svg {
	width: 40%;
	height: 40%;
}

@media (prefers-reduced-motion: reduce) {
	.bank-items--carousel {
		scroll-behavior: auto;
	}

	.bank-carousel__button {
		transition: none;
	}
}

/* A list being replaced after a click on its filter. */
.wp-block-bank-content-list[aria-busy="true"] .bank-content-list__list {
	opacity: 0.55;
	transition: opacity 120ms ease-out;
}