/* Profile badge emoji — a small circle overlaid on the bottom-right corner of any
   avatar image. Sized as a percentage of the wrapper (which shrink-wraps the <img>),
   so it automatically scales with whatever avatar size a given page already uses. */
.avatar-badge-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.avatar-badge {
    position: absolute;
    bottom: -2%;
    right: -2%;
    width: 32%;
    height: 32%;
    min-width: 14px;
    min-height: 14px;
    max-width: 26px;
    max-height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65%;
    line-height: 1;
    transform: scale(0);
    animation: avatarBadgePop .35s ease forwards;
}

@keyframes avatarBadgePop {
    to {
        transform: scale(1);
    }
}