.avatar {
color: $white; background-color: $gray-500; display: inline-flex; align-items: center; justify-content: center; font-size: $font-paragraph; border-radius: 50%; height: 48px; width: 48px;
}
.avatar img {
width: 100%; border-radius: 50%;
}
.avatar + .avatar-content {
display: inline-block; margin-left: .75rem;
} .avatar-lg {
width: 58px; height: 58px; font-size: $font-size-sm;
}
.avatar-sm {
width: 38px; height: 38px; font-size: $font-size-sm;
}
// Overlapped avatars
.avatar-group {
.avatar { position: relative; z-index: 2; border: 2px solid $card-bg; &:hover { z-index: 3; } } .avatar + .avatar { margin-left: -1rem; }
}