/*
 * Breadcrumb.
 *
 * A single line under the nav, inside the header band: links in white .62,
 * chevron separators in white .4, the current page in white .88 and not a
 * link. 14 / 500 on desktop and 13 on mobile (N9, following D8). The
 * separator is the chevron-right glyph file, sized to the text.
 *
 * The markup is the one snippets/breadcrumb.php already renders; only the
 * inline stroke chevron there needs swapping for the glyph file.
 */

@layer vdt.components {
	.vdt-breadcrumb {
		padding-top: var(--vdt-space-24);
		color: var(--vdt-on-dark-faint);
		font-size: var(--vdt-size-breadcrumb);
		font-weight: var(--vdt-weight-medium);
		line-height: 1.5;
	}

	.vdt-breadcrumb__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vdt-space-4) var(--vdt-space-10);
		list-style: none;
		margin: 0;
	}

	.vdt-breadcrumb__item {
		display: inline-flex;
		align-items: center;
		gap: var(--vdt-space-10);
	}

	.vdt-breadcrumb__link {
		color: inherit;
		text-decoration: none;
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-breadcrumb__link:hover {
		color: var(--vdt-on-dark-hover);
	}

	.vdt-breadcrumb__separator {
		display: inline-flex;
		width: 0.875em;
		height: 0.875em;
		color: var(--vdt-on-dark-separator);
	}

	.vdt-breadcrumb__current {
		color: var(--vdt-white-100);
	}

	@media (max-width: 60rem) {
		.vdt-breadcrumb {
			padding-top: var(--vdt-space-16);
		}

		.vdt-breadcrumb__list,
		.vdt-breadcrumb__item {
			gap: var(--vdt-space-8);
		}
	}
}