$vv-nav: (
	--nav-item-padding: var(--spacing-xs) var(--spacing-sm),
	display: flex,
	element: (
		menu: (
			_alias: 'ul',
			flex: 1,
			display: flex,
			flex-direction: column,
			gap: var(--spacing-2),
		),
		item: (
			_alias: 'li',
		),
		heading-label: (
			display: block,
			font-weight: var(--font-semibold),
			[padding]: var(--nav-item-padding),
		),
		item-label: (
			_alias: 'li > :is(a, button)',
			display: flex,
			align-items: center,
			will-change: background-color color,
			transition: var(--transition-all),
			color: var(--color-word-2),
			cursor: pointer,
			[padding]: var(--nav-item-padding),
			state: (
				hover: (
					color: var(--color-word-1),
				),
				current: (
					color: var(--color-word-1),
				),
				disabled: (
					opacity: var(--opacity-50),
					cursor: not-allowed,
					pointer-events: none,			
				),
			),
		),
		separator: (
			_alias: 'li[role="separator"]',
			display: block,
			margin-block: var(--spacing-16),
			height: var(--spacing-px),
			background-color: var(--color-surface-3),
		),
	),
	modifier: (
		sidebar: (
			font-size: var(--text-14),
			element: (
				item-label: (
					border-radius: var(--rounded-md),
					state: (
						active: (
							background-color: var(--color-surface-3),
						),
						hover: (
							background-color: var(--color-surface-2),
						),
						current: (
							background-color: var(--color-surface-1),
						),
					),
				),
			),
		),
		aside: (
			--nav-item-padding: var(--spacing-8) var(--spacing-12),
			font-size: var(--text-12),
			border-left: var(--border) solid var(--color-surface-3),
			element: (
				heading-label: (
					text-transform: uppercase,
				),
				item-label: (
					margin-left: calc(-1 * var(--border)),
					border-left: var(--border) solid var(--color-surface-3),
					border-radius: 0,
					state: (
						hover: (
							border-color: var(--color-brand),
						),
						current: (
							border-color: var(--color-brand),
						),
					),
				),
				separator: (
					margin-block: var(--spacing-8),
				),
			),
		),
		tabs: (
			element: (
				menu: (
					overflow: auto hidden,
					overscroll-behavior-x: contain,
					scroll-behavior: smooth,
					scroll-snap-type: x mandatory,
					flex-direction: row,
					border-bottom: 1px solid var(--color-surface-4),
					scrollbar-width: none,
					pseudo: (
						-webkit-scrollbar: (
								width: 0,
								height: 0,
							),
					),
				),
				item-label: (
					border-bottom: 2px solid transparent,
					margin-bottom: -1px,
					white-space: nowrap,
					state: (
						hover: (
							color: var(--color-brand),
						),
						current: (
							color: var(--color-brand),
							border-color: currentcolor,
							background-color:
								hsl(
									var(--color-brand-hue)
										var(--color-brand-saturation)
										var(--color-brand-lightness) / 5%
								),
						),
					),
				),
			),
		),
		full: (
			element: (
				item: (
					flex: 1 1 0%,
				),
				item-label: (
					display: block,
					width: 100%,
					text-align: center,
				),
			),
		),
	),
) !default;