.element-breadcrumb {
	display: none;

	@media (min-width: 1280px) {
		display: grid;
	}
}

.breadcrumb {
	color: var(--text-neutral);
}

.breadcrumb-list {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.breadcrumb-item {
	position: relative;
	display: inline;
	font-size: 0;

	&:first-child {
		svg,
		a {
			padding-left: 0;
			margin-left: 0;
		}
	}

	span,
	a {
		font-size: var(--font-size-small);
		color: var(--text-neutral);
		text-decoration: none;
	}
	span {
		&[aria-current="page"] {
			color: var(--color-dark);
		}
	}
	a {
		display: inline;
		padding: var(--padding-3xs);

		&:hover {
			text-decoration: underline;
			text-decoration-style: solid;
			text-decoration-skip-ink: auto;
			text-underline-offset: 0.2em;
		}

		&:focus-visible {
			outline: var(--border-xs) solid currentColor;
			outline-offset: 0.25em;
			text-decoration: none;
		}
	}

	&:last-child {
		span[aria-current="page"] {
		}
	}

	&:first-child {
		a:hover {
			animation: bounce-up 0.5s ease;
		}
	}

	.icon {
		font-size: var(--font-size-small);
		line-height: 1;
		vertical-align: bottom;
		display: inline;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin: 0 var(--padding-3xs) 2px;
	}
}