/* Breadcrumb positioned over hero when following it */
.block-breadcrumb-container {
	position: absolute;
	top: 69px;
	left: 16px;
	right: 0;
	z-index: $z-index-breadcrumb;

	@media (min-width: $breakpoint-lg) {
		top: 83px;
		left: 32px;
	}
}

.breadcrumb {
	position: absolute;
	background: none !important;
	padding: $spacing-4 0 !important;

	@media (min-width: $breakpoint-md) {
		padding-block: $spacing-6 !important;
	}

	ol {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
	}

	li {
		@extend %t-body-xs;
		@mixin clamp font-size, 12, 14, $breakpoint-xs, $breakpoint-xl, true;
		display: inline !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
	}

	a {
		@extend %link-underline-reversed;
		color: $color-grey-3 !important;
		display: inline !important;
	}

	li:not(:last-child)::after {
		content: ' / ';
		display: inline;
		color: $color-grey-3;
		margin-inline: $spacing-2;

		@media (min-width: $breakpoint-md) {
			margin-inline: $spacing-2-5;
		}
	}

	li:last-child {
		font-weight: 500 !important;
		color: $color-white !important;
	}

	li:not(:first-child)::before {
		display: none !important;
	}

	&.-dark {
		a,
		li:not(:last-child)::after {
			color: $color-grey-4 !important;
			opacity: 0.8;
		}
		li:last-child {
			color: $color-black-background !important;
		}
	}
	&.-light {
		a,
		li:not(:last-child)::after {
			color: $color-white !important;
			opacity: 0.8;
		}
		li:last-child {
			color: $color-white !important;
		}
	}
}