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

.avatarColor {
	color: var(--mdc-theme-surface);
	background-color: var(--mdc-theme-primary);
}

.avatarColorSecondary {
	color: var(--mdc-theme-surface);
	background-color: var(--mdc-theme-secondary);
}

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

.avatarOutline.avatarColor {
	color: var(--mdc-theme-primary);
	border-color: var(--mdc-theme-primary);
}

.avatarOutline.avatarColorSecondary {
	color: var(--mdc-theme-secondary);
	border-color: var(--mdc-theme-secondary);
}

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

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

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

.circle {
	border-radius: 50%;
}

.square {
	border-radius: 0;
}

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