/**
 * Breadcrumbs
 */
.breadcrumb {
	box-sizing: border-box;
	overflow-x: auto;
	white-space: nowrap;
	padding-inline: 1em;
	transition: background-color .8s;

	&._loading {
		/* height is to prevent page shift on load, bad for seo! */
		height: 3.35em;

		& > .wrapper {
			opacity: 0;
		}
	}

	.wrapper {
		display: flex;
		align-items: center;
		transition: opacity .8s;
		opacity: 1;
	}

	& a {
		box-sizing: border-box;
		color: oklch( 45% 0 90);
		text-decoration: none;
		padding: 1em 1.2em;
		display: inline-block;
		background-image: url('images/icons/arrow-right.svg');
		background-repeat: no-repeat;
		background-position: right 52%;
		background-size: .5em;

		&:hover {
			text-decoration: underline;
		}
	}

	& a.bc-home-link {
		color: black;
		padding-inline: 0 1.5em;

		& svg {
			height: 1.2em;
			width: 1.2em;
			fill: currentColor;
		}
	}

	& a.bc-current-page,
	& a.bc-fakelink
	{
		color: #000;
		text-decoration: none;
		pointer-events: none;
	}

	& a.bc-current-page:hover {
		cursor: text;
	}

	.wrapper > a:last-child {
		background-image: none;
	}


	@media( min-width: 800px) {
		& a.bc-home-link {
			padding-left: 0;
		}

		& a.bc-link:hover {
			color: #981328;
		}
	}
}

/* on themes where the breadcrumb is between these 2 elements, do this fade in thing */
body:has( #globalNav ~ .breadcrumb + header.site-header ) .breadcrumb._loading {
	/* tmp bg color is so blank white strip doesn't look so bad before breadcrumbs load */
	background-color: #000; /* hsl(218, 8%, 45%); */
}


body.header-size-minimal {
	.breadcrumb {
		background-color: hsl(0 0% 96%) !important;
	}
}