/*
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
 * License granted by Canonical Limited
 *
 * This file is part of ubuntu-html5-ui-toolkit.
 *
 * This package is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or
 * (at your option) any later version.

 * This package is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, see
 * <http://www.gnu.org/licenses/>.
 */

/* ----------------------------------
 * Dialog
 * ---------------------------------- */

[data-role="dialog"] {
    background: #000;
    opacity: 0.9;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    font-size: 0;
    /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
    created by white-spaces and break lines in the code betewen inline-block elements */
    color: #fff;
    text-align: center;
    height: 100%;
    display: none;

    &.active {
        display: block;
    }

    & > section {
        @include box_sizing (border-box);
        font-size: 1.5rem;
        color: #FAFAFA;
        width: 100%;
        display: inline-block;
        /*overflow-y: scroll;*/
        vertical-align: middle;
        white-space: normal;
    }

    &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0.1rem;
        height: 100%;
        margin-left: -0.1rem;
    }

    h1 {
        font-size: 1.3rem;
        line-height: 1.5em;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.8em;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
    }

    menu {
        @include box_sizing (border-box);
        white-space: nowrap;
        margin: 0 auto;
        margin-top: 1rem;
        display: block;
        text-align: center;

        [data-role="button"] {
            display: block;
            margin: 0 auto;
            margin-bottom: 10px;
            width: 200px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/* Tablet */
@media only screen and (min-width: 870px){

    [data-role="dialog"] {
        background: rgba(0, 0, 0, 0.6);
        opacity: 1;

        & > section {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            width: 18.7rem;
            padding: 1.8rem;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        input[type="search"],
        input[type="url"],
        input[type="number"] {
            width: 14rem;
        }

        menu [data-role="button"] {
            width: 100%;
            max-width: 100%;
        }
    }

    @keyframes shake{
        0% { -webkit-transform: translate3d(0,0,0); }
        10% { -webkit-transform: translate3d(-20px,0,0); }
        20% { -webkit-transform: translate3d(20px,0,0); }
        30% { -webkit-transform: translate3d(-20px,0,0); }
        40% { -webkit-transform: translate3d(20px,0,0); }
        50% { -webkit-transform: translate3d(-20px,0,0); }
        60% { -webkit-transform: translate3d(20px,0,0); }
        70% { -webkit-transform: translate3d(-20px,0,0); }
        80% { -webkit-transform: translate3d(20px,0,0); }
        90% { -webkit-transform: translate3d(-20px,0,0); }
        100% { -webkit-transform: translate3d(0,0,0); }
    }

    @-webkit-keyframes shake {
        0% { -webkit-transform: translate3d(0,0,0); }
        10% { -webkit-transform: translate3d(-20px,0,0); }
        20% { -webkit-transform: translate3d(20px,0,0); }
        30% { -webkit-transform: translate3d(-20px,0,0); }
        40% { -webkit-transform: translate3d(20px,0,0); }
        50% { -webkit-transform: translate3d(-20px,0,0); }
        60% { -webkit-transform: translate3d(20px,0,0); }
        70% { -webkit-transform: translate3d(-20px,0,0); }
        80% { -webkit-transform: translate3d(20px,0,0); }
        90% { -webkit-transform: translate3d(-20px,0,0); }
        100% { -webkit-transform: translate3d(0,0,0); }
    }

    .shake {
        -webkit-animation: shakeIt .9s ease-in;
        animation: shakeIt .9s ease-in;
    }

}