/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2013 Adobe System Incorporated
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:

 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
 #schedule-prompt {
    display: none;
    position: absolute;
    left: 0;
    top: 55px;
    bottom: 0;
    width: 100%;

    font-family: 'league-gothic-condensed', 'Arial Narrow', sans-serif;
    text-transform: uppercase;

    background-color: rgba(0,0,0,.4);
    z-index: 68;

    @include cache;

    .title, input, textarea {
        opacity: 0;
    }

    &.show {
        .title, input, textarea {
            opacity: 1;
            @include transition(.3s ease-in-out .8s);
        }
        .schedule-form {
            opacity: 1;
            @include transformTransition(.4s ease-in-out, opacity .1s linear);
        }
        .top {
            @include transformTransition(.4s ease-in-out .3s);
        }
        .bottom {
            @include transformTransition(.4s ease-in-out .6s);
        }

        .schedule-form, .top, .bottom{
            @include transform(translateZ(0));
        }
    }
    &.hide {
        .title, input, textarea {
            @include transition(.3s ease-in-out);
        }
        .schedule-form {
            @include transform(translate3d(0,-300px,400px) rotateX(-60deg) rotateY(45deg));
            @include transformTransition(.4s ease-in-out .6s, opacity .2s linear .8s);
        }
        .top {
            @include transformTransition(.4s ease-in-out .3s);
        }
        .bottom {
            @include transformTransition(.4s ease-in-out);
        }
    }

    .wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 368px;
        margin-left: -150px;
        margin-top: -184px;

        @include preserve3d;
        @include perspective(800px);
    }

    .schedule-form{
        display: inline-block;
        opacity: 0;
        @include preserve3d;
        @include transform(translate3d(0,300px,-800px) rotateX(-60deg) rotateY(-15deg));
    }

    .triangle {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 150px solid transparent;
        border-right: 150px solid transparent;

    }

    .top {
        position: relative;
        width: 100%;
        height: 41px;
        background-color: #d14443;
        text-align: center;

        @include cache;
        @include transformOrigin(50%, 100%);
        @include transform(translateZ(2px) rotateX(-180deg));

        .triangle {
            bottom: 40px;
            border-bottom: 51px solid #d14443;
        }

        .title {
            font-size: 36px;
            line-height: 36px;
            color:#e7e5e1;
            letter-spacing: 1px;

            &:before, &:after {
                content: '';
                display: inline-block;
                width: 51px;
                height: 2px;
                margin: 13px 9px;
                background-color: #da8482;
            }
        }
    }

    .content {
        width: 100%;
        height: 190px;

        background-color: #fff;

        border-bottom: 1px solid #d9d9d9;

        input, textarea {
            width: 240px;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            border: none;
            padding: 0 0;
            padding-left: 40px;
            margin: 0 0;
            margin-left: 30px;
            margin-bottom: 10px;
            box-sizing: border-box;

            font-family: 'league-gothic-condensed', 'Arial Narrow', sans-serif;
            font-size: 24px;
            line-height: 42px;
            text-transform: uppercase;
            color: #d14443;

            outline: none;
            background-color: #eaeae9;
            resize: none;
            @include ui-asset(192, -5);

            &.location{
                margin-top: 25px;
            }
            &.date{
                background-position: -192px -32px;
            }
            &.note{
                background-position: -192px -67px;
            }
        }
    }

    .bottom {
        position: relative;
        width: 100%;
        height: 114px;
        padding-top: 25px;
        background-color: #eee;

        @include cache;
        @include transformOrigin(50%, 0);
        @include transform(translateZ(1px) rotateX(180deg));

        input {
            width: 240px;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            border: none;
            padding: 0 0;
            margin: 0 0;
            margin-left: 30px;

            font-family: 'league-gothic-condensed', 'Arial Narrow', sans-serif;
            font-size: 24px;
            line-height: 42px;
            text-transform: uppercase;
            color: #fff;

            outline: none;

            &.save, &.close{
                margin-bottom: 10px;
                background-color: #d14443;
            }

            &.close  {
                display: none;
            }

            &.cancel{
                background-color: #839194;
            }
        }


        .triangle {
            top: 100%;
            margin-top: -1px;
            border-top: 51px solid #eee;
        }

    }

    .events {
        display: none;
    }

    &.is-event {

        .wrapper {
            height: 314px;
            margin-top: -158px;
        }

        .events {
            display: block;
        }

        .my-plans {
            display: none;
        }

        .bottom {
            height: 64px;

            input.close {
                display: block;
            }
            input.save, input.cancel {
                display: none;
            }

        }
    }

}
