@import 'mixins';
@import 'variables';

#modal-wrapper {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000000;
    background:rgba(#000,0.5);

    #modal {
        position:relative;
        max-height:90%;

        width:90%;

        margin: 15px auto;
        border-radius: 6px;

        overflow-y: auto;
        overflow-x: visible;

        background:#fff;
        @include width-small() {
            height:auto;
            max-height:80%;
            margin: 60px auto;

            max-width:500px;
            width:80%;

            border-radius:2px;
            box-shadow:0 0 1px 1px rgba(#000, 0.13);
        }
    }

    #modal-close-button  {
        position:absolute;
        top:0px;
        right:0px;
        padding:2px 15px;
        background:#fff;
        cursor:pointer;
        color:#aaa;
        @include font-size(16, 18);
        z-index:10;
        font-weight:$bold;
    }
    .modal-scroll-wrapper {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        overflow-y:scroll;
        padding:20px 40px;
    }
}

