:root {
	--breadcrumbbarArrow: rgba(0,0,0,.75);
}

breadcrumbbar {
	margin-top: 4px;
	gap: 14px;
	text-transform: uppercase;
	-moz-window-dragging: no-drag !important;

	// prepare for animation
	opacity: 0;
	transform: translateX(-20px);

	// animation settings
	animation-name: fadeInLeftToRight;
	animation-duration: 400ms;
	animation-fill-mode: forwards;

	item {
		display: none;
		gap: 14px;

		&:hover {
			>label {
				opacity: .5 !important;
			}
		}

		&:not(:first-of-type) {
			&::before {
				content: url("chrome://userchrome/content/frameworks/zuneMetro/resources/breadcrumb-arrow.svg");
				fill: currentColor;
				color: var(--breadcrumbbarArrow);
				height: 8px;
				width: 6.5px;

				// prepare for animation
				opacity: 0;
				transform: translateX(-20px);

				// animation settings
				animation-name: fadeInLeftToRight;
				animation-duration: 400ms;
				animation-fill-mode: forwards;
			}
		}

		&.active {
			font-weight: bold;
			color: var(--accentFirst);
		}

		>label {
			// prepare for animation
			opacity: 0;
			transform: translateX(-20px);

			// animation settings
			animation-name: fadeInLeftToRight;
			animation-delay: 240ms;
			animation-duration: 400ms;
			animation-fill-mode: forwards;
		}
	}
}