/* TL Breadcrumb (usato anche dagli hero dei template PHP). */

:where(.tl-bc__list) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--tl-bc-align, flex-start);
	gap: 0 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	line-height: 1.6;
}

:where(.tl-bc__item) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

:where(.tl-bc__link) {
	display: inline-block;
	padding-block: 10px;
	--tl-a: var(--tl-bc-link, var(--e-global-color-tlmuted, #6E6960));
	text-decoration: none;
}

:where(.tl-bc__link:hover) {
	--tl-a: var(--tl-bc-current, var(--e-global-color-primary, #202631));
	text-decoration: underline;
}

:where(.tl-bc__current) {
	color: var(--tl-bc-current, var(--e-global-color-secondary, #2B2A28));
}

:where(.tl-bc__sep) {
	display: inline-flex;
	color: var(--tl-bc-sep, var(--e-global-color-tlgrey, #8A847B));
}

:where(.tl-bc--light) {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

:where(.tl-bc--light .tl-bc__list) {
	font-size: inherit;
}

:where(.tl-bc--light .tl-bc__link) {
	--tl-a: var(--tl-bc-link, rgba(255, 255, 255, .8));
}

:where(.tl-bc--light .tl-bc__link:hover) {
	--tl-a: var(--tl-bc-current, #fff);
}

:where(.tl-bc--light .tl-bc__current) {
	color: var(--tl-bc-current, #fff);
}

:where(.tl-bc--light .tl-bc__sep) {
	color: var(--tl-bc-sep, rgba(255, 255, 255, .5));
}