nitro-react/src/components/groups/GroupView.scss

.nitro-group-manager {
    width: 420px;
    max-height: 400px;
}

.nitro-group-tab-image {
    width: 122px;
    height: 68px;
    background: url('../../assets/images/groups/creator_images.png') no-repeat;

    &.tab-1 {
        background-position: 0px 0px;
        width: 99px;
        height: 50px;
    }

    &.tab-2 {
        background-position: -99px 0px;
        width: 98px;
        height: 62px;
    }

    &.tab-3 {
        background-position: 0px -50px;
        width: 96px;
        height: 45px;
    }

    &.tab-4,
    &.tab-5 {
        background-position: 0px -95px;
        width: 114px;
        height: 61px;
    }
}

.group-information {
    width: 100%;
    height: 100%;
    display: flex;

    .group-badge {
        width: 78px;
        height: 78px;

        .badge-image {
            background-size: contain;
        }
    }

    .group-description {
        height: 55px;
    }
}

.nitro-group-information-standalone {
    width: 500px;
}

.nitro-group-members {
    width: 400px;

    .nitro-group-members-list-grid {

        .member-list-item {
            height: 50px;
            max-height: 50px;

            .avatar-head {
                position: relative;
                overflow: hidden;
                width: 40px;
                height: 50px;
        
                .avatar-image {
                    position: absolute;
                    left: -25px;
                    top: -20px;
                }
            }
        }
    }
}

.group-color-swatch {
    width: 30px;
    height: 40px;
}

@import './views/creator/GroupCreatorView';
@import './views/manager/GroupManagerView';
@import './views/room-information/GroupRoomInformationView';
@import './views/tabs/GroupSharedTabs';