/*Initials Avatars*/
.avatar-initials {
    border-radius: var(--border-radius-round);
    border: none;
    outline: 1px solid var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.avatar-2xs {
    --size: 16px;
    height: var(--size);
    width: var(--size);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}
.avatar-xs {
    --size: 24px;
    height: var(--size);
    width: var(--size);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}
.avatar-sm {
    --size: 32px;
    height: var(--size);
    width: var(--size);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}
.avatar-md {
    --size: 40px;
    height: var(--size);
    width: var(--size);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
}
.avatar-lg {
    --size: 48px;
    height: var(--size);
    width: var(--size);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
}

@media (max-width: 768px) {
    .avatar-xs {
        --size:16px;
        font-size:8px;
        line-height:11px;
    }
    .avatar-sm {
        --size: 24px;
    }
    .avatar-md {
        --size: 32px;
    }
    .avatar-lg {
        --size: 40px;
    }
}

.avatar-magenta {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), var(--magenta-crayon-v2);
}
.avatar-sea {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), var(--sea-serpant-v2);
}
.avatar-chanterelles {
    background-color: var(--chanterelles-v2);
}
.avatar-tanzine {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), var(--tanzine);
}
.avatar-basic {
    background-color: var(--avatar-basic);
}

/*Image Avatars*/
.avatar-img {
    border-radius: var(--border-radius-round);
    border: none;
    outline: 1px solid var(--white);
    background-color: rgba(0, 0, 0, 0.2);
}

.avatar-img-dark {
    border-radius: var(--border-radius-round);
    border: 0.5px solid var(--border-dark);
    background-color: rgba(0, 0, 0, 0.2);
}

.avatar-img-light {
    border-radius: var(--border-radius-round);
    border: 0.5px solid var(--border-medium);
    background-color: rgba(0, 0, 0, 0.2);
}

.img-xs {
    --size:24px;
    height: var(--size);
    width: var(--size);
}
.img-sm {
    --size: 32px;
    height: var(--size);
    width: var(--size);
}
.img-md {
    --size: 40px;
    height: var(--size);
    width: var(--size);
}
.img-lg {
    --size: 48px;
    height: var(--size);
    width: var(--size);
}
.img-xl {
    --size: 56px;
    height: var(--size);
    width: var(--size);
}
.img-2xl {
    --size: 64px;
    height: var(--size);
    width: var(--size);
}
.img-3xl {
    --size: 72px;
    height: var(--size);
    width: var(--size);
}
.img-4xl {
    --size: 80px;
    height: var(--size);
    width: var(--size);
}
.img-5xl {
    --size: 88px;
    height: var(--size);
    width: var(--size);
}

@media (max-width: 768px){
    .img-xs {
        --size: 16px;
    }
    .img-sm {
        --size: 24px;
    }
    .img-md {
        --size: 32px;
    }
    .img-lg {
        --size: 40px;
    }
    .img-xl {
        --size: 48px;
    }
    .img-2xl {
        --size: 56px;
    }
    .img-3xl {
        --size: 64px;
    }
    .img-4xl {
        --size: 72px;
    }
    .img-5xl {
        --size: 80px;
    }
}


/*Avatar Groups*/
.avatar-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-light);
}
.avatar-group > div:nth-of-type(2) {
    flex-grow: 1;
    overflow: hidden; /*for text truncate ellipsis*/
}
.avatar-group > div:nth-of-type(2) > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-group-block {
    width: 172px;
    border-radius: var(--border-radius-default);
    outline-offset: -1px;
    outline: 1px solid var(--border-light);
    padding: 0.5rem;
    font-size: 12px;
    line-height: 16px;
}
@media (max-width: 768px) {
    .avatar-group-block {
        width: 152px;
    }
}

.avatar-group-pill {
    border-radius: var(--border-radius-round);
    background-color: var(--grey-light);
    padding: 0.25rem 0.5rem;
    font-size: 14px;
    line-height: 20px;
}