$vv-dropdown: (
	--dropdown-border-radius: 0px,
	--dropdown-custom-position: false,
	position: relative,
	z-index: var(--z-dropdown),
	display: flex,
	flex-direction: column,
	box-shadow: var(--shadow-lg),
	width: 'max-content',
	element: (
		list: (
			_alias: 'div:is([role="menu"],[role="list-box"])',
			[border-radius]: var(--dropdown-border-radius),
			background-color: var(--color-surface-1),
			overflow: auto,
			pseudo: (
				-webkit-scrollbar: (
						width: var(--spacing-2),
						height: var(--spacing-2),
					),
				-webkit-scrollbar-thumb: (
						background-color: var(--color-brand-lighten-4),
						border: var(--spacing-0) solid transparent,
						background-clip: content-box,
					),
				-webkit-scrollbar-track: (
						background-color: transparent,
						padding: 0,
					),
			),
		),
		item: (
			_alias: ':is([role="option"],[role="presentation"])',
		),
		item-first: (
			_alias: ':is([role="option"],[role="presentation"]):first-child',
			[border-top-left-radius]: var(--dropdown-border-radius),
			[border-top-right-radius]: var(--dropdown-border-radius),
		),
		item-last: (
			_alias: ':is([role="option"],[role="presentation"]):last-child',
			[border-bottom-left-radius]: var(--dropdown-border-radius),
			[border-bottom-right-radius]: var(--dropdown-border-radius),
		),
		item-not-last: (
			_alias:
				':is([role="option"],[role="presentation"]):not(:last-child)',
			border-width: 0 0 var(--border) 0,
			border-color: var(--color-surface-3),
			border-style: solid,
		),
		search: (
			display: block,
			min-width: 0,
			align-items: center,
			min-height: var(--input-min-height),
			background-color: var(--color-surface-2),
			padding: var(--input-spacing-top) var(--input-spacing-right)
				var(--input-spacing-bottom) var(--input-spacing-left),
			font-size: var(--input-font-size),
			pseudo: (
				search-cancel-button: (
					-webkit-appearance: none,
					opacity: var(--opacity-0),
				),
				placeholder: (
					color: var(--color-word-4),
					text-overflow: ellipsis,
				),
			),
		),
		arrow: (
			position: absolute,
			width: var(--spacing-20),
			height: var(--spacing-20),
			z-index: -1,
			pointer-events: none,
			border: none,
			pseudo: (
				before: (
					position: absolute,
					top: 0,
					left: 0,
					width: 0,
					height: 0,
					border-left: var(--spacing-10) solid transparent,
					border-right: var(--spacing-10) solid transparent,
					border-bottom: var(--spacing-10) solid
						var(--color-surface-1),
				),
				after: (
					position: absolute,
					bottom: 0,
					left: 0,
					width: 0,
					height: 0,
					border-left: var(--spacing-10) solid transparent,
					border-right: var(--spacing-10) solid transparent,
					border-top: var(--spacing-10) solid var(--color-surface-1),
				),
			),
		),
	),
	modifier: (
		rounded: (
			--dropdown-border-radius: var(--rounded),
		),
		block: (
			width: 100%,
		),
		bottom: (
			position: absolute,
			top: 100%,
			right: 0,
			left: 0,
		),
		top: (
			position: absolute,
			left: 0,
			right: 0,
			bottom: 100%,
		),
		full-bleed: (
			element: (
				item: (
					min-width: 20ch,
				),
			),
		),
		dialog: (
			--dropdown-border-radius: var(--rounded-lg),
			--dropdown-custom-position: true,
			position: fixed,
			display: flex,
			inset: 0,
			width: auto,
			height: auto,
			z-index: var(--z-modal-backdrop),
			background-color: var(--color-backdrop),
			backdrop-filter: var(--blur-sm),
			justify-content: flex-end,
			align-items: center,
			padding: var(--spacing-lg),
			gap: var(--spacing-md),
			state: (
				close: (
					display: none,
				),
			),
			element: (
				list: (
					max-width: clamp(30dvw, 40rem, 90dvw),
					z-index: var(--z-modal),
				),
			),
		),
		mobile: (
			breakpoint: (
				down-xs: (
					--dropdown-border-radius: var(--rounded-lg),
					--dropdown-custom-position: true,
					position: fixed,
					inset: 0,
					width: auto,
					height: auto,
					z-index: var(--z-modal-backdrop),
					background-color: var(--color-backdrop),
					backdrop-filter: var(--blur-sm),
					justify-content: flex-end,
					padding: var(--spacing-lg),
					gap: var(--spacing-md),
				),
			),
			element: (
				list: (
					breakpoint: (
						down-xs: (
							z-index: var(--z-modal),
							margin-bottom: auto,
							[border-radius]: var(--dropdown-border-radius),
						),
					),
				),
				search: (
					breakpoint: (
						down-xs: (
							[border-radius]: var(--dropdown-border-radius),
						),
					),
				),
			),
		),
	),
	transition: (
		fade-block: (
			active: (
				transition: var(--transition-opacity),
				element: (
					list: (
						transition: var(--transition-transform),
					),
					search: (
						transition: var(--transition-transform),
					),
				),
			),
			enter-from: (
				opacity: var(--opacity-0),
				element: (
					list: (
						translate: 0 100%,
					),
					search: (
						translate: 0 -100%,
					),
				),
			),
			leave-to: (
				opacity: var(--opacity-0),
				element: (
					list: (
						translate: 0 100%,
					),
					search: (
						translate: 0 -100%,
					),
				),
			),
		),
		mobile-fade-block: (
			active: (
				transition: var(--transition-opacity),
				element: (
					list: (
						transition: var(--transition-transform),
					),
					search: (
						transition: var(--transition-transform),
					),
				),
			),
			enter-from: (
				opacity: var(--opacity-0),
				element: (
					list: (
						breakpoint: (
							down-xs: (
								translate: 0 100%,
							),
						),
					),
					search: (
						breakpoint: (
							down-xs: (
								translate: 0 -100%,
							),
						),
					),
				),
			),
			leave-to: (
				opacity: var(--opacity-0),
				element: (
					list: (
						breakpoint: (
							down-xs: (
								translate: 0 100%,
							),
						),
					),
					search: (
						breakpoint: (
							down-xs: (
								translate: 0 -100%,
							),
						),
					),
				),
			),
		),
	),
) !default;