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

@import "../common";

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 610; // higher than blackout
    max-width: 700px;
    min-width: 350px;
    visibility: hidden;
    backface-visibility: hidden;
    @include transform(translateX(-50%) translateY(-50%));

    &.is-loading {
        .modal-close { display: none; }
    }

    &.is-draggable {
        .modal-inner { cursor: default; }
        .modal-head { cursor: move; }
    }
}

.modal-close {
    position: absolute;
    top: $padding;
    right: $padding;
    line-height: 1rem;
    opacity: $default-opacity;
    padding: 5px;

    &:hover { opacity: 1; }
}

.modal-inner {
    position: relative;
    margin: 0 auto;
    background: $gray;
}

.modal-head,
.modal-body,
.modal-foot,
.modal-loading,
.modal-error {
    padding: $padding;
}

// Remove margins from text elements
.modal-body {
    @include content-spacing;
}

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

.modal.is-fullscreen {
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    max-width: 100%;
    max-height: auto;
    border-radius: 0;
    @include transform(translateX(0) translateY(0));
}

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

.modal {
    &.from-above,
    &.from-below,
    &.slide-in-top,
    &.slide-in-bottom,
    &.slide-in-left,
    &.slide-in-right,
    &.flip,
    &.flip-vert {
        .modal-handle {
            opacity: 0;
            @include transition(all $modal-transition);
        }

        &.show .modal-handle {
            opacity: 1;
        }
    }

    &.fade {
        opacity: 0;
        @include transition(opacity $modal-transition);
    }

    &.from-above {
        .modal-handle {
            @include transform(scale(1.3));
        }

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

    &.from-below {
        .modal-handle {
            @include transform(scale(0.7));
        }

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

    &.slide-in-top {
        .modal-handle {
            @include transform(translateY(-50%));
        }

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

    &.slide-in-bottom {
        .modal-handle {
            @include transform(translateY(50%));
        }

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

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

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

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

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

    &.sticky-top {
        top: -100%;
        opacity: 0;
        @include transition(all $modal-transition);
        @include transform(translateX(-50%)); // reset to x

        &.show {
            top: 0;
            opacity: 1;
        }
    }

    &.sticky-bottom {
        top: auto;
        bottom: -100%;
        opacity: 0;
        @include transition(all $modal-transition);
        @include transform(translateX(-50%)); // reset to x

        &.show {
            bottom: 0;
            opacity: 1;
        }
    }

    &.sticky-left {
        left: -100%;
        opacity: 0;
        @include transition(all $modal-transition);
        @include transform(translate(0, -50%));

        &.show {
            left: 0;
            opacity: 1;
        }
    }

    &.sticky-right {
        left: auto;
        right: -100%;
        opacity: 0;
        @include transition(all $modal-transition);
        @include transform(translate(0, -50%));

        &.show {
            right: 0;
            opacity: 1;
        }
    }

    &.flip {
        @include perspective(1300px);

        .modal-handle {
            @include transform-style(preserve-3d);
            @include transform(rotateY(-70deg));
        }

        &.show .modal-handle {
            @include transform(rotateY(0deg));
        }
    }

    &.flip-vert {
        @include perspective(1300px);

        .modal-handle {
            @include transform-style(preserve-3d);
            @include transform(rotateX(-70deg));
        }

        &.show .modal-handle {
            @include transform(rotateX(0deg));
        }
    }
}