/*
 * Breadcrumbs (docs/DESIGN_SYSTEM.md section 8.4). Markup: template-parts/sections/breadcrumbs.php.
 *
 * Small type with "›" between the items; the page itself is the last item and not a link. Below 768 px only the last
 * two items show (the category and the page), so the trail stays on one line; the others are left out for everyone,
 * not only hidden from sight, so a link that cannot be seen cannot take the keyboard's focus either. Every link is a
 * 44 px target.
 */
@layer components {
	.breadcrumbs {
		margin-block-end: var(--space-5);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-2);
		padding: 0;
		list-style: none;
	}

	.breadcrumbs__item {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--size-control-sm);
	}

	.breadcrumbs__item + .breadcrumbs__item::before {
		color: var(--color-text-muted);
		content: "\203A" / "";
	}

	.breadcrumbs__link {
		display: inline-flex;
		align-items: center;
		min-height: var(--size-control-sm);
		color: inherit;
	}

	@media (hover: hover) {
		.breadcrumbs__link:hover {
			color: var(--color-link);
		}
	}

	.breadcrumbs__text {
		color: var(--color-text);
	}

	/* Small screens: the last two items. The first one shown has nothing before it. */
	.breadcrumbs__item:nth-last-child(n + 3) {
		display: none;
	}

	.breadcrumbs__item:nth-last-child(2)::before {
		content: none;
	}

	@media (min-width: 48em) {
		.breadcrumbs__item:nth-last-child(n + 3) {
			display: inline-flex;
		}

		.breadcrumbs__item + .breadcrumbs__item:nth-last-child(2)::before {
			content: "\203A" / "";
		}
	}
}