/*
 * Freshness line and reservation badge.
 *
 * Deliberately kept apart from main.css: that one is a minified bundle without a
 * source, and it is not loaded at all on installations that bring their own design.
 * These few rules are meant to travel with the markup instead.
 *
 * Everything inherits from its surroundings - font, colour and link style come from
 * the host design. Only the badge paints itself, and it does so through custom
 * properties, so a project overrides it with one line:
 *
 *     .vehicle-reserved { --vehicle-reserved-background: #19304d; --vehicle-reserved-color: #fff; }
 */

.vehicle-data-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 1em;
	margin: 0.75em 0 0;
	font-size: 0.8125em;
	line-height: 1.4;
}

.vehicle-data-status__age {
	opacity: 0.7;
}

.vehicle-data-status__source {
	text-underline-offset: 0.15em;
}

.vehicle-reserved {
	--vehicle-reserved-background: #f0b429;
	--vehicle-reserved-color: #1f2933;

	display: inline-block;
	margin: 0 0 0.5em;
	padding: 0.25em 0.75em;
	border-radius: 2em;
	background: var(--vehicle-reserved-background);
	color: var(--vehicle-reserved-color);
	font-size: 0.8125em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* The badge carries an explanation in its title attribute. */
	cursor: help;
}

/* Backgrounds are commonly dropped in print, and the detail page offers a print
   button - so give the badge an outline it can fall back on. */
@media print {
	.vehicle-reserved {
		background: transparent;
		color: inherit;
		border: 1pt solid currentColor;
	}

	.vehicle-data-status__source {
		display: none;
	}
}