.breadcrumbs {
	--bg: var(--color-brand-accent);
	display: flex;
	--height: 2rem;
	--padding: 0px 16px;
	flex-flow: row wrap;
	align-items: center;
	row-gap: 8px;

	span {
		padding: var(--padding);
	}

	a,
	& > span {
		display: inline-block;
		line-height: var(--height);
		font-size: 1rem;
	}

	a {
		text-decoration: none;
		display: flex;
		flex-flow: row nowrap;
		color: var(--color-brand-text-on-accent);

		span {
			background-color: var(--bg);
		}

		.arrow-right,
		.arrow-left {
			width: 0;
			height: 0;
		}

		.arrow-right {
			border-top: calc(var(--height) / 2) solid transparent;
			border-bottom: calc(var(--height) / 2) solid transparent;

			border-left: calc(var(--height) / 2) solid var(--bg);
		}

		.arrow-left {
			width: 0;
			height: 0;
			border-top: calc(var(--height) / 2) solid var(--bg);
			border-bottom: calc(var(--height) / 2) solid var(--bg);
			border-left: calc(var(--height) / 2) solid transparent;
		}

		&:hover {
			filter: brightness(1.1);
		}
	}
}