/* Patterns - Content - User Avatar */
////
/// @group Patterns-User_Avatar
/// Patterns - Content - User Avatar

///
.avatar {
	align-items: center;
	color: var(--color-neutral-0);
	display: inline-flex;
	font-weight: var(--font-semi-bold);
	height: 32px;
	justify-content: center;
	line-height: 1;
	text-transform: uppercase;
	width: 32px;

	&.background {
		&-transparent {
			color: var(--color-primary);
		}

		&-neutral {
			&-0 {
				color: var(--color-primary);
			}

			&-1,
			&-2,
			&-3,
			&-4 {
				color: var(--color-neutral-9);
			}
		}
	}

	&-small {
		font-size: var(--font-size-xs);
		height: 24px;
		width: 24px;
	}

	&-medium {
		font-size: var(--font-size-base);
		height: 40px;
		width: 40px;
	}

	span {
		width: auto;
	}
}