$vv-breadcrumb: (
	position: relative,
	min-width: 0,
	pseudo: (
		after: (
			position: absolute,
			top: 0,
			bottom: 0,
			right: 0,
			display: block,
			width: var(--spacing-sm),
			background:
				linear-gradient(45deg, transparent, var(--color-surface)),
		),
	),
	element: (
		list: (
			_alias: '> ol',
			_combinator: '>',
			position: relative,
			overflow: auto hidden,
			overscroll-behavior-x: contain,
			scroll-behavior: smooth,
			scroll-snap-type: x mandatory,
			scrollbar-width: none,
			display: flex,
			flex-wrap: nowrap,
			list-style: none,
			padding: 0,
			background: var(--color-surface),
			white-space: nowrap,
			pseudo: (
				-webkit-scrollbar: (
						width: 0,
						height: 0,
					),
			),
		),
		item: (
			_alias: '> ol > li:has(a)',
			display: inline-flex,
			align-items: center,
			color: var(--color-word-2),
			pseudo: (
				after: (
					display: block,
					margin-inline: 1ch,
					width: calc(var(--leading-normal) * 1em),
					height: calc(var(--leading-normal) * 1em),
					background-image: var(--bg-chevron),
					background-position: center,
					background-size: 1em,
					background-repeat: no-repeat,
					rotate: -90deg,
				),
			),
		),
		item-active: (
			_alias: '> ol > li:not(:has(a))',
			display: inline-flex,
			align-items: center,
			font-weight: var(--font-bold),
			padding-right: var(--spacing-16),
		),
		link: (
			_alias: '> ol > li > a',
			state: (
				hover: (
					text-decoration: underline,
				),
				focus-within: (
					text-decoration: underline,
				),
				active: (
					color: var(--color-brand-darken-2),
				),
			),
		),
	),
	modifier: (
		multiline: (
			element: (
				list: (
					flex-wrap: wrap,
				),
				item: (
					font-size: var(--text-12),
				),
				item-active: (
					width: 100%,
					font-size: var(--text-18),
					line-height: var(--leading-relaxed),
				),
			),
		),
	),
) !default;