/* Gestapelde avatars met nova-badge; avatar_button heeft een eigen, afwijkende variant. */

.nova-avatars {
	position: relative;
	display: flex;
	width: fit-content;
}

.nova-avatars img {
	width: max(3rem, calc(3 * var(--su)));
	height: max(3rem, calc(3 * var(--su)));
	aspect-ratio: 1 !important;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* min(), niet max(): bij een negatieve marge geeft dat de grootste overlap. */
.nova-avatars img:not(:first-child) {
	margin-left: min(-1.5rem, calc(-1.5 * var(--su)));
}

.nova-avatars img:nth-child(1) {
	background-color: var(--support-2);
}

.nova-avatars img:nth-child(2) {
	background-color: var(--support-1);
}

.nova-avatars img:nth-child(3) {
	background-color: var(--neutral-100);
}

.nova-avatars .nova-badge {
	position: absolute;
	top: 0;
	right: 0;
	translate: 30% -30%;
	width: max(1.375rem, calc(1.375 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	background: var(--badge-nova) center / contain no-repeat;
}