@use "../../00-base/mixin/core.mixin";

%hoo-avatar{
	display: inline-block;

	width: core.px2rem(64px);
	height: core.px2rem(64px);
}

.hoo-avatar-img{
	width: 100%;
	height: auto;

	border-radius: 50%;
	border-collapse: collapse;
	img.hoo-avatar{
		width: 100%;
		height: auto;
		aspect-ratio: auto 1/1;
	}
}

.hoo-avatar{
	@extend %hoo-avatar;

	width: inherit;
	height: inherit;
}
.hoo-avatar-96{
	@extend %hoo-avatar;

	width: core.px2rem(96px);
	height: core.px2rem(96px);

}
.hoo-avatar-72{
	@extend %hoo-avatar;

	width: core.px2rem(72px);
	height: core.px2rem(72px);

}

.hoo-avatar-64{
	@extend %hoo-avatar;
}
.hoo-avatar-48{
	@extend %hoo-avatar;

	width: core.px2rem(48px);
	height: core.px2rem(48px);
}
.hoo-avatar-40{
	@extend %hoo-avatar;

	width: core.px2rem(40px);
	height: core.px2rem(40px);
}
.hoo-avatar-32{
	@extend %hoo-avatar;

	width: core.px2rem(32px);
	height: core.px2rem(32px);
}
.hoo-avatar-24{
	@extend %hoo-avatar;

	width: core.px2rem(24px);
	height: core.px2rem(24px);
}
.hoo-avatar-16{
	@extend %hoo-avatar;

	width: core.px2rem(16px);
	height: core.px2rem(16px);
}
.hoo-avatar-8{
	@extend %hoo-avatar;

	width: core.px2rem(8px);
	height: core.px2rem(8px);
}