.root {
	font-family: var(--font-family);
	font-size: 1.25rem;
	display: flex;
	position: relative;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	user-select: none;
	background-size: cover;
	line-height: 1;
}

.avatarColor {
	color: var(--color-text-inverted);
	background-color: var(--color-highlight);
}

.avatarColorSecondary {
	color: var(--color-text-inverted);
	background-color: var(--color-background-inverted);
}

.avatarOutline {
	background-color: var(--color-background);
	border: 1px solid;
}

.avatarOutline.avatarColor {
	color: var(--color-highlight);
	border-color: var(--color-highlight);
}

.avatarOutline.avatarColorSecondary {
	color: var(--color-background-inverted);
	border-color: var(--color-background-inverted);
}

.small {
	width: var(--avatar-size-small);
	height: var(--avatar-size-small);
}

.medium {
	width: var(--avatar-size-medium);
	height: var(--avatar-size-medium);
}

.large {
	width: var(--avatar-size-large);
	height: var(--avatar-size-large);
}

.circle {
	border-radius: 50%;
}

.square {
	border-radius: 0;
}

.rounded {
	border-radius: var(--border-radius);
}
