/* --------------------------------------------------
jQuery Quick Modal v2.1.0

By Kevin Beronilla
http://www.kevinberonilla.com

Fork on GitHub
https://github.com/kevinberonilla/jquery-quick-modal

Free to use under the MIT license
http://www.opensource.org/licenses/mit-license.php
-------------------------------------------------- */
$prefix: qm;
body {
    &.#{$prefix}-disable-scroll {
        overflow-y: hidden;
        -webkit-overflow-scrolling: none;
    }
    .#{$prefix}-modal {
        transition: all 250ms ease;
        display: none;
        opacity: 0;
        box-sizing: border-box;
        padding: 18px;
        background-color: #fff;
        border-radius: 3px;
        width: 60%;
        min-height: 60px;
        max-height: 90%;
        overflow: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 9999;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
        &.#{$prefix}-animation-fade {
            transform: translate(-50%, -50%) scale(1);
        }
        &.#{$prefix}-animation-fade-up {
            transform: translate(-50%, 150%) scale(1);
        }
        &.#{$prefix}-animation-fade-right {
            transform: translate(-150%, -50%) scale(1);
        }
        &.#{$prefix}-animation-fade-down {
            transform: translate(-50%, -150%) scale(1);
        }
        &.#{$prefix}-animation-fade-left {
            transform: translate(150%, -50%) scale(1);
        }
        &.#{$prefix}-animation-fade-zoom {
            transform: translate(-50%, -50%) scale(2);
        }
        &.#{$prefix}-animation-fade-zoom-up {
            transform: translate(-50%, 150%) scale(2);
        }
        &.#{$prefix}-animation-fade-zoom-right {
            transform: translate(-150%, -50%) scale(2);
        }
        &.#{$prefix}-animation-fade-zoom-down {
            transform: translate(-50%, -150%) scale(2);
        }
        &.#{$prefix}-animation-fade-zoom-left {
            transform: translate(150%, -50%) scale(2);
        }
        &.#{$prefix}-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .#{$prefix}-close-modal {
            position: absolute;
            top: 0;
            right: 0;
            padding: 18px;
            cursor: pointer;
            color: #ccc;
            &:after {
                content: '\2716';
                display: inline-block;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 20px;
            }
            &:focus {
                outline: none;
            }
        }
    }
    ##{$prefix}-modal-background {
        transition: all 250ms ease;
        display: none;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        &.#{$prefix}-visible {
            opacity: 1;
        }
    }
}