/*
Popup

Popup styles from trimble css

Markup:
<button class="button primary reveal-overlay-link" open-container-id="invite-user-popup">Open popup</button>
<div class="reveal-overlay" id="invite-user-popup">
    <div class="reveal">
        <header>
            <h1>Invite People to this Project</h1>
            <button class="close-button close" aria-label="Close reveal" type="button">
                <i class="i32 icon_close_popup"></i>
            </button>
        </header>
        <section>
        Popup content
        </section>
        <footer>
            <button class="button clear close">Cancel</button>
            <button class="button default">Invite</button>
        </footer>
    </div>
</div>

Styleguide UI Elements.popup
*/

@import 'colors.scss';
@import 'variables.scss';
@import 'button.scss';

@mixin reveal-full{
    z-index: 1006;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: none;        
    background-color:$col_gray_light;
    position: fixed;
    top:0;
    bottom: 0;
    right:0;
    left:0;
}

.reveal-overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1005;
    display: none;
    background-color: rgba(10, 10, 10, 0.45);
    overflow-y: scroll;
}

.reveal{
    z-index: 1006;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    padding: 2rem;
    @include shadow-large;
    @include border-radius(0);
    background-color:$col_gray_light;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top:100px;
    width:600px;
    max-width:75rem;
    header{
        @include flex-row-distribute;
        margin-bottom: 2rem;
    }
    h1{
       font-size:$font-header;
       color:$col_trimble_blue_mid;
       //margin:2rem 0;
       font-weight:600;
    }
    footer{
        @include flex-row-distribute;
        margin-top:2.5rem;
        margin-bottom:0.5rem;
        button{
            flex:1 1 auto;
        }
    }
}



@mixin popup-list{
    background-color: $col_white;
    max-height:17.5rem;
    overflow-y:auto;
    margin-bottom:2.25rem;
    li{
        @include flex-row-distribute;
        padding:0 0.875rem;
        height:3.5rem;
        &:nth-child(even){
            background-color: $col_gray_half;
        }
        .avatar-medium{
            flex:0 0 auto;
        }
        .name,.company{
            padding:0 0.75rem;
            flex:1 1 auto;
            width:7rem;
        }
    }
}

.content-list-view{
    @include popup-list;
}


.close-button{
    @include button;
    @include hollow-button;
}

.icon_close_popup{
    background-repeat:no-repeat;
    background-image:url('../images/Icons/close_popup.svg');
}

.icon_esc{
    background-repeat:no-repeat;
    background-image:url('../images/Icons/icon_close.svg');
}