/**
 * @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

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

    &.#{$state-is-prefix}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
    @include transform(translateX(-50%));
}

.#{$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.#{$state-is-prefix}fullscreen .#{$vendor-prefix}modal-outer {
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: auto;
    border-radius: 0;
    @include transform(translateX(0) translateY(0));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @if index($modal-animation, "sticky-top") {
        &.sticky-top {
            .#{$vendor-prefix}modal-outer {
                top: -100%;
                opacity: 0;
                @include 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;
                @include 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%;
                @include transition(all $modal-transition);
                @include 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;
                @include transition(all $modal-transition);
                @include transform(translate(0, -50%));
            }

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