.c-breadcrumbs {
	--horizontal-spacing: 0.5rem;

	width: 100%;
	margin: var(--spacing-4) 0;
	position: relative;

	&__wrapper {
		// Little horizontal spacing prevents truncating focus borders.
		margin: 0 0 0 calc(var(--horizontal-spacing) * -1);
    	padding: 0 var(--horizontal-spacing);
		width: calc(100% + var(--horizontal-spacing) * 2);
		overflow-x: auto;
		scrollbar-width: thin;
	}

	&__wrapper::-webkit-scrollbar {
		height: 4px;
	}

	&__list {
		display: flex;
		flex-wrap: nowrap;
		justify-self: start;
		align-items: center;
		white-space: nowrap;
		padding: var(--horizontal-spacing) 0;
		margin: 0;
		list-style: none;
	}

	&__list-item {
		display: flex;
		align-items: center;
		color: var(--color-text-primary);
		font-size: var(--font-size-sm);

		&:not(:first-child)::before {
			content: "/";
			color: var(--color-text-primary);
			margin: 0 0.5rem;
		}

		&--active {
			color: var(--color-primary);
		}
	}

	&__link {
		color: inherit;
		text-decoration-color: currentColor;
	}

	&--shadow-left::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(var(--horizontal-spacing) * -1);
		height: 100%;
		width: 24px;
		pointer-events: none;
		background: linear-gradient(
			to right,
			var(--color-background-body) 0%,
			rgba(255, 255, 255, 0) 100%
		);
	}
}
