/*
 * STANDARD_RIFT_IO_COPYRIGHT
 */

/* If there's time this really needs to be rewritten. Ideally with smooth animations.*/
@import "style/_colors.scss";

.userManagement {
        max-width: 900px;

    .skyquakePanel-wrapper {
        overflow-x: hidden;
    }
    .userList {

        -ms-flex: 0 1 200px;
        flex: 0 1 200px;

        .activeUser {
            font-weight:bold;
        }

        /* transition: all 2s;*/
        &.expanded {
            -ms-flex: 1 1 100%;
            flex: 1 1 100%;
            /* transition: all 300ms;*/
            .tableRow>div:not(.userName) {
                opacity: 1;
                /* width:auto;*/
                /* transition: width 600ms;*/
                /* transition: opacity 300ms;*/
            }
            &.collapsed {
                -ms-flex: 0 1 200px;
                flex: 0 1 200px;
                /* transition: all 2s;*/
                .tableRow>div:not(.userName) {
                    /* opacity: 0;*/
                    /* width:0px;*/
                    display:none;
                    overflow:hidden;
                    /* transition: all 600ms;*/
                }
            }
        }
        &.hideColumns {
            overflow:hidden;
            >div {
                overflow:hidden;
            }
            .tableRow>div:not(.userName) {
                width: 0px;
                /* transition: all 600ms;*/
            }
            .userName {
                &--header {
                    /* display:none;*/
             }
            }
        }
        .userName {
            cursor:pointer;
        }

    }

    .userAdmin {
            -ms-flex: 1 1;
            flex: 1 1;
            width:auto;
            opacity:1;
    }
    &.userList-open {
        .userAdmin {
            -ms-flex: 0 1 0px;
                flex: 0 1 0px;
            opacity:0;
            /* width: 0px;*/
            display:none;
            /* transition: opacity 300ms;*/
            /* transition: width 600ms;*/

        }
    }
    .rbacButtonGroup, .buttonSection {
        margin: 0 0.5rem 0.5rem;
        background: #ddd;
        padding-bottom: 0.5rem;
        padding: 0.5rem 0;
    }
    .buttonGroup {
        border-top: #d3d3d3 1px solid;
        padding-top:0.5rem;
    }
    table {
        font-size: 0.8rem;
        thead {
            border-bottom:1px solid #d3d3d3;
            td{
                font-weight:bold;
            }
        }
        td{
            padding:0.25rem 0.5rem;
            vertical-align: middle;
            .checkbox {
                -ms-flex-pack:center;
                    justify-content:center;
            }
        }
    }
}




.tableRow {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0.25rem;
    margin: .125rem 0;
    >div {
        padding:0.25rem 1rem 0.25rem 0;
        -ms-flex: 1 1 33%;
            flex: 1 1 33%;
    }
    &--header {
        font-weight:bold;
    }
    &--data {
        &:nth-child(even) {
            background:$neutral-dark-0;
        }
        &:hover:not(&-active) {
            background:$neutral-dark-1;
        }
        &:hover, .activeUser, &-active{
            cursor:pointer;
            color:white;
        }
        .activeUser, &-active{
            background: #00acee !important;
        }
    }


    .userProfile {
        &-table {
            thead{
                font-weight:bold;
            }
            font-size: 1rem;
            tr {
                td {
                    vertical-align:top;
                }
            }
        }
    }
}

.addInput, .removeInput {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    margin-left: 1rem;

    font-size:0.75rem;
    text-transform:uppercase;
    font-weight:bold;

    cursor:pointer;
    img {
        height:0.75rem;
        margin-right:0.5rem;
        width:auto;
    }
    span {
        color: #5b5b5b;
        text-transform: uppercase;
    }
}