$zindex-modal-background: 500;

.fade {
    opacity: 0;
    @include transition(opacity .15s linear);
    
    &.in {
        opacity: 1;
    }
}


// Kill the scroll on the body
.modal-open {
    overflow: hidden;

    .content-wrapper{
        -webkit-transform:none;
        transform:none;
    }
}

// Container that the modal scrolls within
.modal {
    @include border-box();
    display: none;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal-background;
}

// Shell div to position the modal with bottom padding
.modal-dialog {
    @include border-box();
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 0px;
    z-index: ($zindex-modal-background + 10);
    height:90%;
    width:85%;

    &:before{
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
    }
}

// Actual modal
.modal-content {
    @include border-box();
    @include border-radius(3px);
    width:98.70%;
    position: relative;
    background-color: white;
    outline: none;
    margin-top:2em;
    padding-bottom:3em;
    display:inline-block;
    vertical-align: middle;
    overflow:hidden;
}

// Modal background
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: ($zindex-modal-background - 10);
    background-color: black;
    // Fade for backdrop
    &.fade { opacity:0; }
    &.in { opacity:0.5; }
}

.modal .close{
    padding:0;
    position:absolute;
    width:50px;
    height:50px;
    top:10px;
    right:10px;
    z-index:1;
}

// Where all modal content resides
.modal-body {
    position: relative;
    padding-bottom:2em;

    header{
        padding-right:100px;
    }
}

@media screen and (min-width: $breakpoint-mobile) {
    .modal-dialog {
        padding:0px 0 2em $menu-width;
    }
}
@media screen and (min-width: $breakpoint-desktop-larger){
    .modal-dialog {
        max-width:$breakpoint-desktop-larger;
        padding:0 0 2em 0;
    }
}