@import mixins
@import keyframes

+keyframes-vex-flyin
+keyframes-vex-flyout
+keyframes-vex-pulse

$blue: #3288e6

.vex.vex-theme-os
    padding-top: 160px
    padding-bottom: 160px

    &.vex-closing .vex-content
        animation: vex-flyout .5s forwards

    .vex-content
        animation: vex-flyin .5s

    .vex-content
        border-radius: 5px
        box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, .08)
        font-family: "Helvetica Neue", sans-serif
        border-top: 20px solid #bbb
        background: #f0f0f0
        color: #444
        padding: 1em
        position: relative
        margin: 0 auto
        max-width: 100%
        width: 450px
        font-size: 1.1em
        line-height: 1.5em

        h1, h2, h3, h4, h5, h6, p, ul, li
            color: inherit

    .vex-close
        border-radius: 0 5px 0 0
        position: absolute
        top: 0
        right: 0
        cursor: pointer

        &:before
            border-radius: 3px
            position: absolute
            content: "\00D7"
            font-size: 26px
            font-weight: normal
            line-height: 31px
            height: 30px
            width: 30px
            text-align: center
            top: 3px
            right: 3px
            color: #bbb
            background: transparent

        &:hover:before, &:active:before
            color: #777
            background: #e0e0e0

    .vex-dialog-form

        .vex-dialog-message
            margin-bottom: .5em

        .vex-dialog-input
            margin-bottom: 1em

            select, textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
                border-radius: 3px
                background: #fff
                width: 100%
                padding: .25em .67em
                border: 0
                font-family: inherit
                font-weight: inherit
                font-size: inherit
                min-height: 2.5em
                margin: 0 0 .25em

                &:focus
                    box-shadow: inset 0 0 0 1px $blue
                    outline: none

        .vex-dialog-buttons
            +pie-clearfix()

    .vex-dialog-button
        border-radius: 3px
        border: 0
        float: right
        margin: 0 0 0 .5em
        font-family: inherit
        text-transform: uppercase
        letter-spacing: .1em
        font-size: .8em
        line-height: 1em
        padding: .75em 2em

        &.vex-last
            margin-left: 0

        &:focus
            animation: vex-pulse 1.1s infinite
            outline: none

            // vex-pulse uses -webkit-filter which
            // doesn't play so nice in mobile webkit
            @media (max-width: 568px)
                animation: none

        &.vex-dialog-button-primary
            background: $blue
            color: #fff

        &.vex-dialog-button-secondary
            background: #e0e0e0
            color: #777

.vex-loading-spinner.vex-theme-os
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 .5em rgba(0, 0, 0, .2)
    border-radius: 100%
    background: rgba(255, 255, 255, .2)
    width: 0
    height: 0
    border: 1.2em solid #bbb
    border-top-color: #f0f0f0
    border-bottom-color: #f0f0f0