/*
 * The free shipping bar.
 *
 * Every colour comes in as a custom property set on .fsbwc-bar itself, so the
 * shop's choices need no generated stylesheet and no inline <style> block. The
 * fallbacks below are the shipped colours, which is what a bar rendered by an
 * older cached fragment falls back to rather than going invisible.
 *
 * The rules that decide whether this reads as a bar at all -- the track's size,
 * its colour and its corners -- are written inline by class-bar.php as well as
 * here, so a storefront that never receives this file still gets a bar. Those
 * inline rules all read custom properties, which is why the overrides further
 * down still work: setting --fsbwc-height for the mini-cart reaches the inline
 * height, where setting the height itself would not.
 *
 * The consequence for anyone restyling the bar is that a plain height or
 * border-radius on .fsbwc-bar__track loses to the inline rule. Set the custom
 * property instead.
 */
.fsbwc-bar-host {
	margin: 0 0 1.25em;
}

/*
 * The host is left on the page while the cart is empty so the add-to-cart
 * fragment has an element to replace. Hiding it is left to the hidden
 * attribute, and a theme with a blanket display rule on divs beats the browser
 * default and turns it back on -- as an empty box with a margin above the
 * mini-cart. Said here as well, where a class and an attribute outrank it.
 */
.fsbwc-bar-host[hidden] {
	display: none;
}

.fsbwc-bar {
	--fsbwc-bar: #eef1f5;
	--fsbwc-progress: #2f9e44;
	--fsbwc-text: #1d2327;
	--fsbwc-height: 12px;
	--fsbwc-radius: 999px;

	box-sizing: border-box;
	width: 100%;
	color: var(--fsbwc-text);
}

.fsbwc-bar__message {
	margin: 0 0 0.5em;
	padding: 0;
	color: var(--fsbwc-text);
	font-size: 0.95em;
	line-height: 1.45;
}

/* The amount matters more than the sentence around it. */
.fsbwc-bar__message .woocommerce-Price-amount {
	font-weight: 700;
	white-space: nowrap;
}

.fsbwc-bar__track {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--fsbwc-height);
	border-radius: var(--fsbwc-radius);
	background-color: var(--fsbwc-bar);
}

.fsbwc-bar__progress {
	display: block;
	height: 100%;
	min-width: 0;
	border-radius: inherit;
	background-color: var(--fsbwc-progress);

	/*
	 * The fill is set by the server as a percentage width, so the transition is
	 * what makes it grow rather than jump when the mini-cart fragment swaps the
	 * bar out after an add-to-cart.
	 */
	transition: width 600ms ease;
}

/* Square, for a theme with no rounded corners anywhere else on the page. */
.fsbwc-bar--square {
	--fsbwc-radius: 0;
}

.fsbwc-bar--qualified .fsbwc-bar__message {
	font-weight: 600;
}

/*
 * Effects. Each one is applied to the fill and nothing else, so the empty part
 * of the bar stays still and the movement reads as progress rather than as a
 * page that has not finished loading.
 */

/* Moving stripes: the diagonal hatch travels along the fill. */
.fsbwc-bar--stripes .fsbwc-bar__progress {
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.25) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0.25) 75%,
		transparent 75%,
		transparent
	);
	background-size: 1rem 1rem;
	animation: fsbwc-stripes 1s linear infinite;
}

@keyframes fsbwc-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

/* Sweeping shine: a soft highlight crosses the fill and comes back. */
.fsbwc-bar--shine .fsbwc-bar__progress {
	position: relative;
	overflow: hidden;
}

.fsbwc-bar--shine .fsbwc-bar__progress::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: fsbwc-shine 2.4s ease-in-out infinite;
}

@keyframes fsbwc-shine {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(320%);
	}
}

/* Gentle pulse: the fill breathes, for a shop that wants the least of it. */
.fsbwc-bar--pulse .fsbwc-bar__progress {
	animation: fsbwc-pulse 2s ease-in-out infinite;
}

@keyframes fsbwc-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

/*
 * A customer who has asked their device for less movement has asked for it
 * everywhere, and a decorative animation is exactly what that setting is for.
 * The bar keeps its colours and its width; it simply stops moving.
 */
@media (prefers-reduced-motion: reduce) {
	.fsbwc-bar__progress,
	.fsbwc-bar--stripes .fsbwc-bar__progress,
	.fsbwc-bar--pulse .fsbwc-bar__progress,
	.fsbwc-bar--shine .fsbwc-bar__progress::after {
		animation: none;
		transition: none;
	}

	.fsbwc-bar--shine .fsbwc-bar__progress::after {
		display: none;
	}
}

/*
 * The mini-cart, both the classic widget and the block one. It is a narrow
 * panel rather than a page, so the bar is drawn smaller and closer in.
 *
 * The block drawer is named twice over because WooCommerce rebuilt it: it used
 * to be React under .wc-block-mini-cart__items and is now server-rendered
 * blocks under .wp-block-woocommerce-filled-mini-cart-contents-block. Both are
 * listed because a shop on either version is a shop with a mini-cart.
 */
.widget_shopping_cart .fsbwc-bar,
.wc-block-mini-cart .fsbwc-bar,
.wc-block-mini-cart__items .fsbwc-bar,
.wc-block-mini-cart__drawer .fsbwc-bar,
.wp-block-woocommerce-filled-mini-cart-contents-block .fsbwc-bar {
	--fsbwc-height: 8px;

	margin: 0;

	/*
	 * The sentence takes no second reduction of its own here. Sizes in em
	 * multiply, and .fsbwc-bar__message is already below its parent, so
	 * shrinking the panel and the sentence separately left the one line a
	 * customer is meant to read as the smallest text in the drawer.
	 */
	font-size: 0.9em;
}

/*
 * The block drawer pads its blocks rather than its container: the items area
 * and the footer each carry their own 16px. The bar is put between the two as
 * a sibling of both, so without the same inset it runs to the edges of the
 * drawer while everything above and below it stops short.
 */
.wc-block-mini-cart__drawer .fsbwc-bar-host,
.wp-block-woocommerce-filled-mini-cart-contents-block .fsbwc-bar-host {
	margin: 0;
	padding: 0 16px 16px;
}

/*
 * The announcement carries its own inline rules, and these two cannot be
 * among them: wp_kses() checks the bar on its way out, and safecss refuses
 * any declaration whose value is a function -- rect() and inset() included --
 * whatever the property is. Without them the element is still hidden, by the
 * 1px box and the overflow, but clipping is what keeps a stray descender or a
 * long word from showing a pixel of itself in the corner of the page.
 */
.fsbwc-bar-live {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}