:root {
    --dim-default-avatar: 30px;
}

.card-user {
    --dim-user-img: var(--dim-default-avatar);

	position: relative;
	font-weight: 600;
	text-align: center;
	align-items: center;
	display: flex;
}

div[avatar] {
    --dim-img-avatar: var(--dim-default-avatar);

	&[size="xxs"] {
		--dim-img-avatar: 20px;
	}

    &[size="xs"] {
		--dim-img-avatar: 25px;
	}

	&[size="xl"] {
		--dim-img-avatar: 45px;
	}

    :is(&, & .card-user) {
        --dim-user-img: var(--dim-img-avatar);
    }
}

.card-user-img {
	border-radius: 100%;
	margin-right: 5px;
	width: var(--dim-user-img);
	height: var(--dim-user-img);
}

.container-avatar-lista {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;

	& .card-user-img {
		border: 2px solid white;
	}

	& div:not(:first-child) .card-user-img {
		margin-left: -15px;
	}
}