.iew-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--iew-breadcrumb-gap, 8px);
	--iew-breadcrumb-icon-size: 13px;
}

.iew-breadcrumb--no-wrap {
	flex-wrap: nowrap;
	overflow: hidden;
}

.iew-breadcrumb--left {
	justify-content: flex-start;
}

.iew-breadcrumb--center {
	justify-content: center;
}

.iew-breadcrumb--right {
	justify-content: flex-end;
}

.iew-breadcrumb__list {
	display: inline-flex;
	align-items: center;
	flex-wrap: inherit;
	gap: var(--iew-breadcrumb-gap, 8px);
	padding: 0;
	margin: 0;
	list-style: none;
	min-width: 0;
}

.iew-breadcrumb__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iew-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	color: var(--iew-breadcrumb-current-color, inherit);
	line-height: inherit;
}

.iew-breadcrumb__item > a,
.iew-breadcrumb__item > span {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--iew-breadcrumb-gap, 8px) * 0.45);
	min-width: 0;
	max-width: 100%;
	line-height: inherit;
}

/* Schema mode wraps label/icon in itemprop=name spans; align those wrappers too. */
.iew-breadcrumb__item > a > span[itemprop="name"],
.iew-breadcrumb__item > span[itemprop="name"] {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--iew-breadcrumb-gap, 8px) * 0.45);
	min-width: 0;
	max-width: 100%;
	line-height: inherit;
}

.iew-breadcrumb__item a {
	color: var(--iew-breadcrumb-link-color, inherit);
	text-decoration: none;
}

.iew-breadcrumb__item > span {
	color: inherit;
}

.iew-breadcrumb__item a:hover,
.iew-breadcrumb__item a:focus {
	color: var(--iew-breadcrumb-link-hover-color, inherit);
	text-decoration: underline;
}

.iew-breadcrumb__item.is-current,
.iew-breadcrumb__item.is-current span {
	color: var(--iew-breadcrumb-current-color, inherit);
	font-weight: inherit;
}

.iew-breadcrumb__label {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: inherit;
}

.iew-breadcrumb__home-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--iew-breadcrumb-home-icon-color, var(--iew-breadcrumb-link-color, inherit));
	vertical-align: middle;
}

.iew-breadcrumb__home-icon,
.iew-breadcrumb__home-icon svg,
.iew-breadcrumb__separator-icon,
.iew-breadcrumb__separator-icon svg {
	width: var(--iew-breadcrumb-icon-size);
	height: var(--iew-breadcrumb-icon-size);
	font-size: var(--iew-breadcrumb-icon-size);
	display: block;
	vertical-align: middle;
}

.iew-breadcrumb__separator-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.iew-breadcrumb__home-icon svg,
.iew-breadcrumb__separator-icon svg {
	fill: currentColor;
}

.iew-breadcrumb__separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--iew-breadcrumb-separator-color, inherit);
	opacity: 0.9;
	user-select: none;
	line-height: inherit;
}

@media (max-width: 767px) {
	.iew-breadcrumb--mobile-wrap,
	.iew-breadcrumb--mobile-wrap .iew-breadcrumb__list {
		flex-wrap: wrap;
	}
}