$vv-tooltip: (
	opacity: var(--opacity-0),
	display: block,
	position: absolute,
	inset-inline: 100% auto,
	top: 50%,
	translate: var(--spacing-10) -50%,
	z-index: var(--z-tooltip),
	inline-size: max-content,
	max-inline-size: 25ch,
	border-radius: var(--rounded-md),
	padding: var(--spacing-4) var(--spacing-sm),
	background: var(--color-gray-darken-4),
	font-size: var(--text-12),
	font-weight: var(--font-normal),
	color: var(--color-gray-lighten-5),
	text-align: center,
	box-shadow: var(--shadow-md),
	will-change: opacity,
	transition: var(--transition-opacity),
	pseudo: (
		after: (
			position: absolute,
			z-index: -1,
			inset-inline: 0 auto,
			inset-block: 50% auto,
			translate: -100% -50%,
			border-width: var(--spacing-8),
			border-style: solid,
			border-color: transparent var(--color-gray-darken-4) transparent
				transparent,
		),
	),
	modifier: (
		visible: (
			opacity: var(--opacity-100),
		),
		top: (
			inset-inline: 50% 0,
			inset-block: auto 100%,
			translate: -50% calc(var(--spacing-10) * -1),
			pseudo: (
				after: (
					inset-inline: 50% auto,
					inset-block: 100% auto,
					translate: -50%,
					rotate: -90deg,
				),
			),
		),
		bottom: (
			inset-inline: 50% 0,
			inset-block: 100% auto,
			translate: -50% var(--spacing-10),
			pseudo: (
				after: (
					inset-inline: 50% auto,
					inset-block: 0 auto,
					translate: -50% -100%,
					rotate: 90deg,
				),
			),
		),
		left: (
			inset-inline: auto 100%,
			translate: calc(var(--spacing-10) * -1) -50%,
			pseudo: (
				after: (
					position: absolute,
					inset-inline: auto 0,
					translate: 100% -50%,
					rotate: 180deg,
				),
			),
		),
	),
) !default;