/**
 * Reward progress bar.
 *
 * How close the cart is to a free gift and to free shipping, with a marker on
 * the track for each. Shared by the cart page and the side cart — two views of
 * one cart should not disagree about how close it is — so it lives in its own
 * sheet that both enqueue. Colour and type tokens come from whichever of
 * .pv-cart or .pv-drawer it is rendered inside.
 *
 * @package Purovitalis
 */

.pv-rewards {
	flex: 0 0 auto;
	padding: 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
}

.pv-rewards__message {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.35;
}

.pv-rewards__message strong {
	font-weight: 800;
}

.pv-rewards__track {
	position: relative;
	display: block;
	height: 8px;
	margin: 11px 0;
	border-radius: 100px;
	background: var(--pv-border-default);
}

.pv-rewards__fill {
	display: block;
	height: 100%;
	border-radius: 100px;
	background: var(--pv-text-primary);
	transition: width 300ms ease;
}

/* Milestones sit on the track at the spend they need, so the distance between
   them reads as the distance it actually is. */
.pv-rewards__marker {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	border-radius: 11px;
	background: var(--pv-border-default);
	color: var(--pv-neutral-300);
	transform: translateY( -50% );
}

.pv-rewards__marker.is-unlocked {
	background: var(--pv-text-primary);
	color: var(--pv-text-inverse);
}

.pv-rewards__marker svg {
	width: 12px;
	height: 12px;
}