.NameAndAvator {
    background: rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    text-align: center;
    padding: 0 2px;
    &.want-avatar-transparent {
        background: transparent;
    }

    .avatorName {
        color: rgba(0, 0, 0, 0.85);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.want-avatar-text.ant-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    .ant-avatar-string {
        position: static;
    }
}
.whale-badge-avatar-fallback {
    background: url(data:image/png;base64,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);
    border-radius: 50%;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

.ant-scroll-number-custom-component.whale-badge-avatar-corner-icon-topRight {
    border-radius: 50%;
    background: transparent;
    transform-origin: center;
    transform: translate(25%, -25%);
}

.ant-scroll-number-custom-component.whale-badge-avatar-corner-icon-bottomRight {
    transform: none;
    top: auto;
    bottom: 0;
}