.avatar {
    position: relative;
    img {
        border-radius: 100%;
        width: 8rem;
    }
}

.avatar-sm {
    img {
        width: 3rem;
    }
}

.avatar-xs {
    img {
        width: 2.25rem;
    }
}

.avatar-profile {
    border-radius: 100%;
    display: block;
    border: 2px solid $white;
}

.avatar-profile-img {
    border: 3px solid $white;
    position: relative;
    z-index: 1;
}

.avatar-dot {
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 100%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 3px solid $white;
    z-index: 3;
}

.avatar-dot.dot-sm {
    border-width: 2px;
    right: 1%;
}


.avatar-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.avatar-group-img {
    margin-left: -.9rem;

    img {
        border: 3px solid $white;
    }

    &:hover {
        z-index: 50;
    }

    &:first-of-type {
        margin-left: 0;
    }
}