/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

.#{$vendor-prefix}modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: $modal-zindex;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none; // fall through to blackout

    &.is-loading {
        .#{$vendor-prefix}modal-close { display: none; }
    }

    &.is-draggable {
        .#{$vendor-prefix}modal-inner { cursor: default; }
        .#{$vendor-prefix}modal-head { cursor: move; }
    }
}

.#{$vendor-prefix}modal-close {
    position: absolute;
    background: none;
    border: 0;
    top: $padding;
    right: $padding;
    line-height: 1rem;
    opacity: $default-opacity;
    padding: 5px;

    &:hover { opacity: 1; }
}

.#{$vendor-prefix}modal-outer {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: auto;
    margin: $margin;
    pointer-events: auto; // allow within modal
    transform: translateX(-50%);

    @include if-max($breakpoint-mobile-landscape) {
        width: auto;
        left: auto;
        right: auto;
        transform: translateX(0);
    }
}

.#{$vendor-prefix}modal-inner {
    position: relative;
    margin: 0 auto;
}

.#{$vendor-prefix}modal-head,
.#{$vendor-prefix}modal-body,
.#{$vendor-prefix}modal-foot {
    padding: $padding;
}

//-------------------- Modifiers --------------------//

.#{$vendor-prefix}modal.is-fullscreen .#{$vendor-prefix}modal-outer {
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: auto;
    border-radius: 0;
    transform: translate(0, 0);
}

//-------------------- Animations --------------------//

.#{$vendor-prefix}modal {
    #{join-classes($modal-animation)} {
        .#{$vendor-prefix}modal-handle {
            opacity: 0;
            transition: all $modal-transition;
        }

        &.show .#{$vendor-prefix}modal-handle {
            opacity: 1;
        }
    }

    @if index($modal-animation, "from-above") {
        &.from-above {
            .#{$vendor-prefix}modal-handle {
                transform: scale(1.3);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: scale(1);
            }
        }
    }

    @if index($modal-animation, "from-below") {
        &.from-below {
            .#{$vendor-prefix}modal-handle {
                transform: scale(0.7);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: scale(1);
            }
        }
    }

    @if index($modal-animation, "slide-in-top") {
        &.slide-in-top {
            .#{$vendor-prefix}modal-handle {
                transform: translateY(-50%);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: translateY(0);
            }
        }
    }

    @if index($modal-animation, "slide-in-bottom") {
        &.slide-in-bottom {
            .#{$vendor-prefix}modal-handle {
                transform: translateY(50%);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: translateY(0);
            }
        }
    }

    @if index($modal-animation, "slide-in-left") {
        &.slide-in-left {
            .#{$vendor-prefix}modal-handle {
                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
                transform: translateX(-50%);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: translateX(0);
            }
        }
    }

    @if index($modal-animation, "slide-in-right") {
        &.slide-in-right {
            .#{$vendor-prefix}modal-handle {
                transition: all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9);
                transform: translateX(50%);
            }

            &.show .#{$vendor-prefix}modal-handle {
                transform: translateX(0);
            }
        }
    }

    @if index($modal-animation, "sticky-top") {
        &.sticky-top {
            .#{$vendor-prefix}modal-outer {
                top: -100%;
                opacity: 0;
                transition: all $modal-transition;
            }

            &.show .#{$vendor-prefix}modal-outer {
                top: 0;
                opacity: 1;
            }
        }
    }

    @if index($modal-animation, "sticky-bottom") {
        &.sticky-bottom {
            .#{$vendor-prefix}modal-outer {
                top: auto;
                bottom: -100%;
                opacity: 0;
                transition: all $modal-transition;
            }

            &.show .#{$vendor-prefix}modal-outer {
                bottom: 0;
                opacity: 1;
            }
        }
    }

    @if index($modal-animation, "sticky-left") {
        &.sticky-left {
            .#{$vendor-prefix}modal-outer {
                left: -100%;
                opacity: 0;
                top: 50%;
                transition: all $modal-transition;
                transform: translate(0, -50%);
            }

            &.show .#{$vendor-prefix}modal-outer {
                left: 0;
                opacity: 1;
            }
        }
    }

    @if index($modal-animation, "sticky-right") {
        &.sticky-right {
            .#{$vendor-prefix}modal-outer {
                left: auto;
                right: -100%;
                top: 50%;
                opacity: 0;
                transition: all $modal-transition;
                transform: translate(0, -50%);
            }

            &.show .#{$vendor-prefix}modal-outer {
                right: 0;
                opacity: 1;
            }
        }
    }
}