/*
 * Track pill. design/DESIGN-SYSTEM.md §4.11, §4.19.
 *
 * A plain list of the eight circuits: no links, no radius, Barlow 600 italic.
 * The hover state is the one §4.11 recommends -- the prototype defines none.
 */

.sp-track-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-track-pill {
	margin: 0;
	padding: 10px var(--sp-7);
	border: var(--sp-border-field);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 600;
	font-size: var(--sp-fs-md);
	letter-spacing: var(--sp-ls-pill);
	text-transform: uppercase;
	/* TODO token: track pill label colour, rgba(255,255,255,0.80) (§1.1). */
	color: rgba(255, 255, 255, 0.80);
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		color var(--sp-dur-fast) var(--sp-ease);
}

.sp-track-pill + .sp-track-pill {
	margin-top: 0;
}

.sp-track-pill:hover {
	border-color: var(--sp-red);
	color: var(--sp-text);
}