.avatarWrapper {
    display: inline-block;
    position: relative;
    width: fit-content;
    border-radius: 50%;

    // &:hover {
    // 	cursor: pointer;
    // }

    .avatarWhiteBackground {
        position: absolute;
        background: white;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .avatarOutline {
        position: absolute;
        filter: opacity(0);
        background: white;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset -1px 2px 2px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
    }

    & > :global(.ant-avatar) {
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    :global(.ant-avatar-string) {
        background: inherit;
    }
}

.avatarBtn {
    height: 100%;
    background-color: transparent;
    display: flex;
    border: none;
    outline: none;
    padding: 0;
    border-radius: 50%;

    .avatarOutline {
        &:hover {
            filter: opacity(0.2);
            transition: 0.2s all;
            background: white;
            cursor: pointer;
        }
        &:active {
            transition: 0.2s all;
            filter: opacity(0);
            cursor: pointer;
        }
    }
}