%muc-avatar-icon {
    text-indent: 999px;
    background-image: image-url("group_white.svg");
    background-size: 70% 70% !important;
    background-repeat: no-repeat;
}

.jsxc_windowItem {
    &.jsxc_groupchat.jsxc_normal {
        .jsxc_fade {
            padding-top: 44px;
        }

        .jsxc_fingerprints, .jsxc_verification, .jsxc_transfer, .jsxc_video, .jsxc_sendFile {
            display: none;
        }

        .jsxc_members {
            background-image: image-url("group_white.svg");
            background-size: 15px 15px;
            background-repeat: no-repeat;
            background-position: center;

            &:hover {
                opacity: 1.0;
            }
        }

        .jsxc_chatmessage.jsxc_in {
            margin-left: 50px;

            .jsxc_avatar {
                display: block;
                position: absolute;
                bottom: 0px;
                left: -50px;
                background-color: #777;

                &:before {
                    display: none;
                }
            }
        }

        .jsxc_bar {
            .jsxc_avatar {
                @extend %muc-avatar-icon;
            }
        }
    }

    .jsxc_memberlist {
        height: 44px;
        width: 100%;
        background-color: $window_bar_bg;
        overflow: hidden;
        position: absolute;
        top: 0px;
        transition: height 400ms;
        z-index: 100;

        ul {
            white-space: nowrap;
            position: absolute;
            background-color: $window_bar_bg;
            color: $window_bar_color;
            overflow: hidden;
            transition: left 400ms;
            padding: 0px;
            padding-left: 6px;
            padding-right: 6px;
            padding-top: 3px;

            & > li {
                display: inline-block;
                white-space: normal;

                &:last-child {
                    margin-right: 2px;
                }

                .jsxc_name {
                    display: none;
                }

                .jsxc_avatar {
                    margin-left: 2px;
                    margin-right: 0px;
                }
            }
        }

        &.jsxc_expand {
            ul {
                white-space: normal;

                & > li {
                    display: block;
                    width: 100%;
                    height: 40px;
                    line-height: 40px;

                    .jsxc_name {
                        display: block;
                        cursor: default;

                        &:hover {
                            color: inherit;
                        }
                    }

                    .jsxc_avatar {
                        margin-right: 4px;
                    }
                }
            }
        }
    }
}

li[data-type="groupchat"] {
    .jsxc_avatar {
        @extend %muc-avatar-icon;
    }

    .jsxc_video {
        display: none;
    }
}
