$vv-accordion: (
	--accordion-marker-size:
		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
	--accordion-padding-top: var(--spacing-14),
	--accordion-padding-right: var(--spacing-14),
	--accordion-padding-bottom: var(--spacing-14),
	--accordion-padding-left: var(--spacing-14),
	overflow: hidden,
	state: (
		open: (
			element: (
				summary: (
					background-color: var(--color-surface-2),
					pseudo: (
						before: (
							rotate: 0,
						),
					),
				),
			),
		),
		disabled: (
			element: (
				summary: (
					cursor: not-allowed,
					pointer-events: none,
					opacity: var(--opacity-50),
				),
			),
		),
	),
	element: (
		summary: (
			_alias: '> summary',
			_combinator: '>',
			position: relative,
			cursor: pointer,
			user-select: none,
			[padding-top]: var(--accordion-padding-top),
			[padding-right]: var(--accordion-padding-right),
			[padding-bottom]: var(--accordion-padding-bottom),
			[padding-left]:
				calc(
					var(--accordion-padding-left) + var(--accordion-marker-size)
				),
			line-height: var(--leading-normal),
			color: var(--color-word-2),
			will-change: background-color,
			transition: var(--transition-colors),
			border-radius: var(--rounded-lg),
			-webkit-tap-highlight-color: transparent,
			outline: none,
			pseudo: (
				before: (
					display: block,
					position: absolute,
					[top]: var(--accordion-padding-top),
					[left]: var(--accordion-padding-left),
					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,
					will-change: rotate,
					transition: var(--transition-transform),
					rotate: -90deg,
				),
				marker: (
					display: none,
				),
				-webkit-details-marker: (
						display: none,
					),
			),
			state: (
				hover: (
					background-color: var(--color-surface-1),
				),
				focus-visible: (
					background-color: var(--color-surface-1),
				),
			),
		),
		content: (
			_alias: '> summary + *',
			_combinator: '>',
			padding-block: var(--spacing-sm),
			[padding-inline]: var(--accordion-padding-left)
				var(--accordion-padding-right),
		),
	),
	modifier: (
		marker-right: (
			element: (
				summary: (
					[padding-right]:
						calc(
							var(--accordion-padding-right) +
								var(--accordion-marker-size)
						),
					[padding-left]: var(--accordion-padding-left),
					pseudo: (
						before: (
							left: auto,
							[right]: var(--accordion-padding-right),
							rotate: 0,
						),
					),
				),
			),
			state: (
				open: (
					element: (
						summary: (
							pseudo: (
								before: (
									rotate: -180deg,
								),
							),
						),
					),
				),
			),
		),
		bordered: (
			--accordion-padding-top: var(--spacing-xs),
			--accordion-padding-right: var(--spacing-xs),
			--accordion-padding-bottom: var(--spacing-xs),
			--accordion-padding-left: var(--spacing-xs),
			border: var(--border) solid var(--color-surface-4),
			border-radius: var(--rounded-lg),
			state: (
				open: (
					element: (
						summary: (
							border-bottom-right-radius: 0,
							border-bottom-left-radius: 0,
						),
					),
				),
			),
		),
		square: (
			border-radius: 0,
			element: (
				summary: (
					border-radius: 0,
				),
			),
		),
	),
) !default;