.pk-component.avatar-button {
    width: fit-content;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: max(.5rem, calc(1 * var(--su)));
    --background: var(--white-100);
    padding: max(.625rem, calc(.625 * var(--su))) max(1.5rem, calc(1.5 * var(--su))) max(.625rem, calc(.625 * var(--su))) max(.625rem, calc(.625 * var(--su)));
    background-color: var(--background);
    border-radius: 999px;
}

.pk-component.avatar-button.avatars-only {
	width: fit-content;
	padding: 0;
	gap: 0;
	flex-direction: row;
	align-items: center;
	background: transparent;
	border-radius: 0;
}

.pk-component.avatar-button .avatars {
    position: relative;
    display: flex;
    height: fit-content;
}

.pk-component.avatar-button .avatars::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: max(1rem, calc(1 * var(--su)));
    height: auto;
    aspect-ratio: 1;
    background: var(--badge-nova) center / contain no-repeat;
}

.pk-component.avatar-button .avatars img {
    flex-shrink: 0;
    width: max(3rem, calc(3 * var(--su)));
    height: max(3rem, calc(3 * var(--su)));
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: grey; 
    /* TODO: mag weg bij def afbeeldingen ^ */
}

.pk-component.avatar-button .avatars img:nth-child(1) {
    background-color: var(--support-2);
}

.pk-component.avatar-button .avatars img:nth-child(2) {
    background-color: var(--support-1);
}

.pk-component.avatar-button .avatars img:nth-child(3) {
    background-color: var(--neutral-100);
}

.pk-component.avatar-button .avatars img:not(:first-child) {
    margin-left: max(-1.5em, calc(-1.5 * var(--su)))
}

.pk-component.avatar-button .text {
    display: flex;
    flex-direction: column;
    font-size: var(--body-xs-regular);
}

.pk-component.avatar-button .text .title {
    color: var(--primary-100);
}

.pk-component.avatar-button .text .subtitle {
    color: var(--primary-80);
}

@media only screen and (max-width:767px) {

    .pk-component.avatar-button{
        width: 100%;
        flex-direction: column;
        align-items: start;
        border-radius: .5rem;
    }
    
}