/**
 * Progress: a bar, and the figure beside it.
 *
 * In @layer avia-components, assigned beside the enqueue in
 * avia-common-helper/includes/ui-frontend.php and applied by the import block in
 * includes/css-cascade.php. Read that file first -- it is where the cascade on
 * any page carrying this component is decided.
 *
 * Named for what it is. The course card is the only caller today, and the split
 * is worth making for that reason rather than in spite of it: a progress
 * indicator living in the card's stylesheet under the card's name is one the
 * reports pages could only reach by forking it.
 *
 * A BAR, AFTER A ROUND AS A RING
 *
 * The geometry is the design file's Progress bar atom: 5px tall, fully rounded,
 * the track on the border colour and the fill on the accent. Both of those are
 * tokens the file names in --bb-* terms; they are read here through their
 * --avia-* aliases, which is the token layer's rule and the reason a tenant that
 * moves its border colour moves this too.
 *
 * The ring it replaces was smaller and cost the card no height at all, sitting at
 * the end of a row that already spanned the body. What it could not do is show a
 * proportion at a glance across a grid: twenty 16px arcs are twenty glyphs to
 * read one at a time, where twenty bars on a common left edge sort themselves.
 * That is what a bar is for, and it is why it takes a line of its own.
 *
 * ONE ELEMENT, ONE PSEUDO
 *
 * The fill is a pseudo-element rather than a second span, so the markup is a
 * track and a number. The percentage arrives as a custom property because it is
 * the one thing about a progress indicator that cannot come from a stylesheet.
 *
 * ONE COLOUR, WHATEVER THE VALUE
 *
 * The fill is the brand accent from 1% to 100%, with no second colour for
 * finished. Colour-coding a proportion says something the proportion already
 * says, and it says it in the vocabulary a page uses for warnings: on a card
 * whose only other coloured things are a mandatory badge and an overdue
 * countdown, a green bar is a third meaning of colour.
 */

.avia-progress {
	display: flex;
	align-items: center;
	/*
	 * Full width wherever it lands. The bar is the component's flexible part and
	 * a flexible part needs a width to be a fraction of, so the component asks
	 * for one itself rather than making every caller remember to stretch it.
	 */
	width: 100%;
	gap: var(--avia-space-3);
	color: var(--avia-color-heading);
	font-size: var(--avia-text-base);
	/* the bar already carries the emphasis; the figure only names what it shows */
	font-weight: var(--avia-weight-normal);
	/* so a column of cards does not step left and right as the figures change width */
	font-variant-numeric: tabular-nums;
	line-height: var(--avia-leading-none);
	/* the figure is two or three glyphs and a sign; there is nothing here to wrap */
	white-space: nowrap;
}

/*
 * Thickness is a property rather than a value so a caller can ask for a heavier
 * bar without restating the fill. The radius is the pill token: the file draws
 * 3px on a 5px bar, which is already past half the height and so is a pill by
 * another name.
 */
.avia-progress-track {
	--avia-progress-thickness: 5px;
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	height: var(--avia-progress-thickness);
	border-radius: var(--avia-radius-pill);
	background: var(--avia-color-border);
}

.avia-progress-track::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--avia-progress, 0) * 1%);
	border-radius: inherit;
	background: var(--avia-progress-color, var(--avia-color-accent));
}