/*
 * Breadcrumbs (components/breadcrumbs/). Colours follow the surface through
 * --gb-section-text / --gb-section-muted (set by dark sections).
 */

.gb-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--gb-step--1);
	color: var(--gb-section-muted, var(--gb-text-muted));
}

.gb-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

/* Separator: a small chevron pointing to the reading end (drawn, never read). */
.gb-breadcrumbs__item + .gb-breadcrumbs__item::before {
	content: "";
	inline-size: 0.4em;
	block-size: 0.4em;
	border-block-start: 1.5px solid currentColor;
	border-inline-start: 1.5px solid currentColor;
	opacity: 0.6;
}

/*
 * The two borders form a corner at the top / inline-start; turned so the
 * corner points to the reading end: left in RTL, right in LTR.
 */
[dir="rtl"] .gb-breadcrumbs__item + .gb-breadcrumbs__item::before {
	rotate: -135deg;
}

[dir="ltr"] .gb-breadcrumbs__item + .gb-breadcrumbs__item::before {
	rotate: 135deg;
}

.gb-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.gb-breadcrumbs__link:hover {
	color: var(--gb-section-text, var(--gb-text));
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.gb-breadcrumbs__current {
	color: var(--gb-section-text, var(--gb-text));
	font-weight: var(--gb-weight-bold);
}