$vv-avatar: (
	background-color: var(--color-brand),
	border-radius: var(--rounded),
	color: var(--color-white),
	display: inline-flex,
	position: relative,
	justify-content: center,
	align-items: center,
	font-size: var(--text-12),
	line-height: var(--leading-none),
	width: var(--spacing-28),
	height: var(--spacing-28),
	background-position: center,
	background-size: contain,
	background-repeat: no-repeat,
	object-fit: contain,
	flex-shrink: 0,
	state: (
		focus-visible: (
			outline: var(--spacing-px) solid var(--color-brand),
			outline-offset: var(--spacing-0),
		),
	),
	element: (
		badge: (
			_alias: '> sup',
			_combinator: '>',
			position: absolute,
			top: 0,
			right: 0,
			translate: 50% -33.3%,
			box-shadow: var(--shadow-sm),
		),
		badge-bottom: (
			_alias: '> sub',
			_combinator: '>',
			position: absolute,
			bottom: 0,
			right: 0,
			translate: 50% 33.3%,
			box-shadow: var(--shadow-sm),
		),
		image: (
			_alias: '> img',
			_combinator: '>',
			width: 100%,
			height: 100%,
			object-fit: inherit,
			border-radius: var(--rounded),
			overflow: hidden,
		),
	),
	modifier: (
		rounded: (
			border-radius: var(--rounded-full),
			element: (
				image: (
					border-radius: var(--rounded-full),
				),
			),
		),
		square: (
			border-radius: var(--rounded-none),
			element: (
				image: (
					border-radius: var(--rounded-none),
				),
			),
		),
		bordered: (
			border-color: var(--color-brand-lighten-3),
			border-width: var(--border),
			border-style: solid,
		),
		md: (
			font-size: var(--text-14),
			width: var(--spacing-34),
			height: var(--spacing-34),
		),
		lg: (
			font-size: var(--text-16),
			width: var(--spacing-40),
			height: var(--spacing-40),
		),
		transparent: (
			background-color: var(--color-transparent),
		),
		surface: (
			background-color: var(--color-surface-2),
			border-color: var(--color-surface-5),
			color: var(--color-word-2),
		),
		danger: (
			background-color: var(--color-danger),
			border-color: var(--color-danger-lighten-3),
		),
		success: (
			background-color: var(--color-success),
			border-color: var(--color-success-lighten-3),
		),
		warning: (
			background-color: var(--color-warning-darken-5),
			border-color: var(--color-warning-darken-2),
		),
		info: (
			background-color: var(--color-info-darken-5),
			border-color: var(--color-info-darken-2),
		),
		accent: (
			background-color: var(--color-accent),
			border-color: var(--color-accent-darken-3),
		),
		gray: (
			background-color: var(--color-gray-darken-1),
			border-color: var(--color-gray-lighten-2),
		),
		ring: (
			color: var(--color-brand-darken-3),
			background-color: var(--color-surface-brand),
			border-color: currentcolor,
			border-width: var(--border),
			border-style: solid,
			modifier: (
				surface: (
					background-color: var(--color-surface),
					color: var(--color-word-2),
				),
				danger: (
					background-color: var(--color-surface-danger),
					color: var(--color-danger),
				),
				success: (
					background-color: var(--color-surface-success),
					color: var(--color-success-darken-3),
				),
				warning: (
					background-color: var(--color-surface-warning),
					color: var(--color-warning-darken-5),
				),
				info: (
					background-color: var(--color-surface-info),
					color: var(--color-info-darken-5),
				),
				accent: (
					background-color: var(--color-surface-accent),
					color: var(--color-accent),
				),
				gray: (
					background-color: var(--color-surface-4),
					color: var(--color-word-2),
				),
			),
		),
	),
) !default;