@use "balloon";

.ffz-avatar {
	background-color: inherit;
	position: relative;

	&--size-10 { height: 1rem; width: 1rem }
	&--size-15 { width: 1.5rem; height: 1.5rem }
	&--size-20 { width: 2rem; height: 2rem }
	&--size-24 { width: 2.4rem; height: 2.4rem }
	&--size-30 { width: 3rem; height: 3rem }
	&--size-36 { width: 3.6rem; height: 3.6rem }
	&--size-40 { width: 4rem; height: 4rem }
	&--size-50 { width: 5rem; height: 5rem }
	&--size-60 { width: 6rem; height: 6rem }
	&--size-64 { width: 6.4rem; height: 6.4rem }
	&--size-80 { width: 8rem; height: 8rem }
	&--size-96 { width: 9.6rem; height: 9.6rem }
	&--size-120 { width: 12rem; height: 12rem }
	&--size-300 { width: 30rem; height: 30rem }
}

.ffz-image-avatar,
.ffz-avatar__img {
	width: 100%;
}