/*
 * Barre de livraison offerte, sous le formulaire d'achat.
 */

.dosage-livraison {
	--dlv-encre: var(--wp--preset--color--ink, #14110e);
	--dlv-filet: var(--wp--preset--color--line, #e6e1d9);
	--dlv-signal: var(--wp--preset--color--signal, #14110e);
	--dlv-second: var(--wp--preset--color--data, #4c453d);
	--dlv-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);

	margin-top: var(--wp--preset--spacing--40, 16px);
}

.dosage-livraison[hidden] {
	display: none;
}

.dosage-livraison__texte {
	margin: 0 0 8px;
	font-family: var(--dlv-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--dlv-second);
}

.dosage-livraison__jauge {
	height: 3px;
	background: var(--dlv-filet);
	overflow: hidden;
}

.dosage-livraison__remplissage {
	display: block;
	height: 100%;
	width: 0;
	background: var(--dlv-signal);
	transition: width 240ms ease-out;
}

.dosage-livraison--atteint .dosage-livraison__texte {
	color: var(--dlv-encre);
}

/* Le seuil atteint est une bonne nouvelle : elle se lit, elle ne clignote pas. */
.dosage-livraison--atteint .dosage-livraison__remplissage {
	background: var(--dlv-encre);
}

@media (prefers-reduced-motion: reduce) {
	.dosage-livraison__remplissage {
		transition: none;
	}
}

/*
 * Pendant l'appel au Store API, le bouton dit qu'il travaille. Sans ce signe,
 * un réseau lent donne l'impression que le clic n'a pas pris, et la cliente
 * clique deux fois.
 */
.dosage-achat--en-cours {
	opacity: 0.65;
	cursor: progress;
}