.mf-crumbs {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--mf-space-2);
	font-size: var(--mf-font-size-small);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
}

.mf-crumbs-step {
	color: var(--mf-color-text-muted);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--mf-color-accent);
		outline: none;
	}
}

.mf-crumbs-sep {
	color: var(--mf-color-border-strong);
}

.mf-crumbs-leaf {
	color: var(--mf-color-text);
}