/**
 * Free-shipping progress bar, at the top of the totals column.
 *
 * ⚠️ The track and the fill must not resolve to the same colour. The first
 * version painted the track in `currentColor` and tried to lighten it with an
 * inset box-shadow at 8 % black — black over black — while the fill took
 * `--wp--preset--color--contrast`, which is also near-black in this theme. Both
 * layers came out solid black, so the bar looked full at every basket size and
 * said nothing at all. The track is now a flat tint and only the fill carries
 * the theme colour.
 */

.ms-fsp {
	margin: 0 0 1.5em;
}

.ms-fsp__text {
	margin: 0 0 0.5em;
	font-size: 0.9em;
	line-height: 1.4;
}

.ms-fsp__track {
	box-sizing: border-box;
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.1 );
}

.ms-fsp__fill {
	height: 100%;
	border-radius: 3px;
	background: var( --wp--preset--color--contrast, #111111 );
	transition: width 300ms ease-out;
}

.ms-fsp--qualified .ms-fsp__text {
	font-weight: 600;
}

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

/**
 * In the mini-cart drawer the bar is a sibling of the items list and the
 * footer, in a wrapper that has no padding of its own — each child carries the
 * drawer's own 16px, so this does too (`.wc-block-mini-cart__items` and
 * `.wc-block-mini-cart__footer` in mini-cart.css, not a guess).
 *
 * ⚠️ Explicit `box-sizing` and `width`. Padding alone put the track ~16px past
 * the right edge of the drawer, so something in the cascade was sizing this
 * element from its content box; stating both makes it the parent's width with
 * the padding inside, whatever that something is.
 *
 * It also sits directly on top of the footer's `border-top`, so it needs real
 * space beneath it, and a thinner track than the cart page's — 6px of solid
 * black immediately above a horizontal rule reads as a slab.
 */

.ms-fsp--mini {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 4px 16px 20px;
}

.ms-fsp--mini .ms-fsp__text {
	margin: 0 0 0.6em;
	font-size: 0.8125em;
}

.ms-fsp--mini .ms-fsp__track {
	height: 4px;
	border-radius: 2px;
}

.ms-fsp--mini .ms-fsp__fill {
	border-radius: 2px;
}

.ms-fsp[hidden] {
	display: none;
}