/* Breadcrumbs widget: the path to the current page, items in a row with separators between. */

.owbc {
	--owbc-gap: 0.5em;
	--owbc-focus: currentColor;
}

.owbc__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em var(--owbc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.owbc__item {
	display: inline-flex;
	align-items: center;
	gap: var(--owbc-gap);
	min-width: 0;
	margin: 0;
	/* Long titles wrap rather than push the page wider. */
	overflow-wrap: anywhere;
}

.owbc__item::before,
.owbc__item::marker {
	content: none;
}

.owbc__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.2em;
	border-radius: 2px;
	transition: color 0.2s;
}

/* Links are told apart from the current page by more than colour: underlined on hover and focus, or always. */
.owbc-underline-hover .owbc__link:hover,
.owbc-underline-hover .owbc__link:focus-visible,
.owbc-underline-always .owbc__link {
	text-decoration: underline;
}

.owbc__link:focus-visible {
	outline: 2px solid var(--owbc-focus);
	outline-offset: 2px;
}

.owbc__current {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.owbc__sep {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	opacity: 0.7;
}

.owbc__icon {
	display: inline-flex;
	line-height: 0;
}

.owbc__icon svg,
.owbc__sep svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Right-to-left languages: the trail runs the other way, so arrows point the other way. */
[dir="rtl"] .owbc__sep {
	transform: scaleX(-1);
}

/* Text kept for screen readers and search engines when home shows as an icon only. */
.owbc__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (forced-colors: active) {
	.owbc__sep {
		opacity: 1;
	}

	.owbc__link:focus-visible {
		outline-color: Highlight;
	}
}
