.Avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.AvatarStack {
    height: 100%;

    &__item {
        position: relative;
        height: 100%;
        display: inline-block;
        aspect-ratio: 1/1;

        &:not(:first-child) {
            @overlap: 10px;
            @border: 2%;
            @threshold: 50% + @border;

            margin-left: -@overlap;

            // we can't use circle because it only supports <length>
            // ellipse supports <length-percentage>
            mask: radial-gradient(
                ellipse 100% 100% at calc(-50% + @overlap) 50%,
                transparent @threshold,
                #fff (@threshold+1)
            );
        }
    }
}

.TextAvatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    user-select: none;
    font-size: 0.85em;
    white-space: nowrap;
    aspect-ratio: 1/1;
}

.PlatformAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    img {
        height: 65%;
        width: 65%;
    }
}
