@import "variables";

.avatar {
	display: inline-block;
	vertical-align: middle;
}

.avatar-frame {
	display: inline-block;
	width: 100%;
	padding: 50% 0px;
	// TODO: Remove
	background-color: var(--pink-200);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 50%;
}

.avatar img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 50%;
}

.avatar-empty {
	border: 1px dashed #d1d8dd;
	border-radius: 50%;
}

.avatar-small {
	width: 36px;
	height: 36px;
	.standard-image {
		font-size: 14px;
	}
}

.avatar-medium {
	width: 36px;
	height: 36px;

	.standard-image {
		font-size: 18px;
	}
}

.avatar-large {
	width: 72px;
	height: 72px;

	.standard-image {
		font-size: 36px;
	}
}

.avatar-xl {
	width: 108px;
	height: 108px;

	.standard-image {
		font-size: 36px;
	}
}

.avatar-xs {
	width: 17px;
	height: 17px;

	.standard-image {
		font-size: 9px;
	}
}

.standard-image {
	width: 100%;
	height: 0;
	padding: 50% 0;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	font-size: 14px;
	line-height: 0px;
	//color: #fff;
	color: $text-muted;
	border: 1px solid $border-color;
	font-weight: normal;
}