/*
 * Breadcrumb trail.
 *
 * Colours come from three custom properties rather than from a modifier per
 * band, so a dark surface retints the trail by setting them once on itself.
 * The defaults live in the var() fallbacks rather than as declarations here: a
 * value set on .breadcrumbs itself would beat anything inherited from the band
 * around it, which is the one thing these properties exist to allow.
 */

/* Held at a fixed size rather than scaled with the viewport, the way the
	   eyebrow is: it labels the page rather than being read as copy. */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.375rem;
	font-family: var(--sk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.breadcrumbs__item {
	display: flex;
	gap: 0.375rem;
}

/*
	 * The separator is drawn rather than written into the list, so the trail is
	 * announced as a list of crumbs instead of a run of slashes.
	 */

.breadcrumbs__item + .breadcrumbs__item::before {
	color: var(--sk-crumb-divider, color-mix(in srgb, var(--sk-gray) 60%, transparent));
	content: "/";
}

.breadcrumbs__link {
	color: var(--sk-crumb, var(--sk-gray));
	text-decoration: none;
	transition: color var(--sk-transition);

	&:hover,
	&:focus-visible {
		color: var(--sk-crumb-current, var(--sk-accent));
		text-decoration: none;
	}
}

.breadcrumbs__current {
	color: var(--sk-crumb-current, var(--sk-accent));
}