.hcb-breadcrumb {
	--hcb-gap: 8px;
	--hcb-font-size: 14px;
	--hcb-link-color: #55595c;
	--hcb-link-hover-color: #1d2327;
	--hcb-current-color: #1d2327;
	--hcb-separator-color: #b9bdc1;
	--hcb-bg: transparent;
	--hcb-radius: 6px;
	--hcb-padding: 0;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--hcb-gap);
	margin: 0;
	padding: var(--hcb-padding);
	background: var(--hcb-bg);
	border-radius: var(--hcb-radius);
	font-size: var(--hcb-font-size);
	line-height: 1.6;
}

.hcb-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.hcb-breadcrumb__link {
	color: var(--hcb-link-color);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hcb-breadcrumb__link:hover,
.hcb-breadcrumb__link:focus-visible {
	color: var(--hcb-link-hover-color);
	text-decoration: underline;
}

.hcb-breadcrumb__current {
	color: var(--hcb-current-color);
	font-weight: 500;
}

.hcb-breadcrumb__separator {
	display: inline-flex;
	align-items: center;
	color: var(--hcb-separator-color);
	user-select: none;
}

.hcb-breadcrumb__separator svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.hcb-breadcrumb__separator i {
	color: inherit;
}