/**
 * Flavors Progress Bar widget styles.
 *
 * Layout model (matches widgets/progress_bar.php render output):
 *   .flavor-progress-bar-wrapper   -> the track (full width, background color)
 *     .flavor-progress-bar-overlay -> the animated coloured fill (0 -> percent)
 *     .flavor-progress-bar         -> content layer (title + in-bar percent),
 *                                     sits above the fill at the same width
 *   .flavor-progress-bar-percent-out -> optional floating label above the fill
 */

.flavor-progress-bar-wrapper {
	position: relative;
	width: 100%;
	background-color: rgba( 0, 0, 0, 0.1 );
	border-radius: 4px;
}

/* The coloured fill. Width is set inline for the no-JS fallback and animated
   from 0 -> percent by assets/js/progress_bar.js. */
.flavor-progress-bar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background-color: #3498db;
	border-radius: inherit;
	z-index: 1;
}

/* Content layer: overlaps the fill exactly (same left edge + width) and holds
   the title and the in-bar percent. Transparent so the fill shows through. */
.flavor-progress-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 24px;
	width: 0;
	overflow: visible;
	background-color: transparent;
	border-radius: inherit;
}

.flavor-progress-bar-title {
	padding: 0 10px;
	white-space: nowrap;
	line-height: 1.2;
}

.flavor-progress-bar-percent {
	margin-left: auto;
	padding: 0 10px;
	white-space: nowrap;
	line-height: 1.2;
}

/* Floating "out of the bar" percent label. Its horizontal position tracks the
   fill edge (set inline / by JS as a left percentage). */
.flavor-progress-bar-percent-out {
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: translateX( -50% );
	margin-bottom: 8px;
	padding: 2px 8px;
	white-space: nowrap;
	background-color: #3498db;
	color: #fff;
	border-radius: 3px;
	line-height: 1.4;
	z-index: 3;
}

.flavor-progress-bar-percent-out:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-top-color: #3498db;
}

/* Animated diagonal stripes over the coloured fill. */
.flavor-progress-bar.stripes {
	background-image: linear-gradient(
		45deg,
		rgba( 255, 255, 255, 0.15 ) 25%,
		transparent 25%,
		transparent 50%,
		rgba( 255, 255, 255, 0.15 ) 50%,
		rgba( 255, 255, 255, 0.15 ) 75%,
		transparent 75%,
		transparent
	);
	background-size: 1rem 1rem;
	animation: flavor-progress-bar-stripes 1s linear infinite;
}

@keyframes flavor-progress-bar-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

/* Respect reduced-motion: no stripe animation, no width transition. */
@media ( prefers-reduced-motion: reduce ) {
	.flavor-progress-bar.stripes {
		animation: none;
	}

	.flavor-progress-bar,
	.flavor-progress-bar-overlay {
		transition: none !important;
	}
}