/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("modal") {
    #{$modal-class} {
        @include full-screen();
        opacity: 0;
        visibility: hidden;
        z-index: $modal-zindex;
        overflow: auto;
        transition: opacity $modal-transition, visibility $modal-transition;
        -webkit-overflow-scrolling: touch;

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

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

    #{$modal-class-close} {
        position: absolute;
        background: none;
        border: 0;
        top: $padding;
        #{$align-opposite-direction}: $padding;
        line-height: 1rem;
        opacity: $default-opacity;
        padding: 5px;

        &:hover { opacity: 1; }
    }

    #{$modal-class-outer} {
        position: relative;
        margin: $margin;
        transition: transform $modal-transition;

        @include if-min($modal-mobile-breakpoint) {
            width: 50%;
            margin: $margin auto;
        }
    }

    #{$modal-class-inner} {
        position: relative;
    }

    #{$modal-class-head},
    #{$modal-class-body},
    #{$modal-class-foot} {
        padding: $padding;
    }

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

    #{$modal-class}.is-fullscreen #{$modal-class-outer} {
        @include full-screen("");
        margin: 0;
        max-width: 100%;
        border-radius: 0;
        transform: translate(0, 0);
    }

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

    #{$modal-class} {
        @if index($modal-animations, "from-above") {
            &.from-above {
                #{$modal-class-outer} {
                    transform: scale(1.3);
                }

                &.show #{$modal-class-outer} {
                    transform: scale(1);
                }
            }
        }

        @if index($modal-animations, "from-below") {
            &.from-below {
                #{$modal-class-outer} {
                    transform: scale(0.7);
                }

                &.show #{$modal-class-outer} {
                    transform: scale(1);
                }
            }
        }

        @if index($modal-animations, "slide-in-top") {
            &.slide-in-top {
                #{$modal-class-outer} {
                    transform: translateY(-50%);
                }

                &.show #{$modal-class-outer} {
                    transform: translateY(0);
                }
            }
        }

        @if index($modal-animations, "slide-in-bottom") {
            &.slide-in-bottom {
                #{$modal-class-outer} {
                    transform: translateY(50%);
                }

                &.show #{$modal-class-outer} {
                    transform: translateY(0);
                }
            }
        }

        @if index($modal-animations, "slide-in-left") {
            &.slide-in-left {
                #{$modal-class-outer} {
                    transform: translateX(-25%);
                }

                &.show #{$modal-class-outer} {
                    transform: translateX(0);
                }
            }
        }

        @if index($modal-animations, "slide-in-right") {
            &.slide-in-right {
                #{$modal-class-outer} {
                    transform: translateX(25%);
                }

                &.show #{$modal-class-outer} {
                    transform: translateX(0);
                }
            }
        }
    }
}