@import mixins
@import keyframes

+keyframes-vex-fadein
+keyframes-vex-fadeout

+keyframes-vex-rotation

.vex, .vex *, .vex *:before, .vex *:after
    +box-sizing(border-box)

.vex
    position: fixed
    overflow: auto
    -webkit-overflow-scrolling: touch
    z-index: 1111
    top: 0
    right: 0
    bottom: 0
    left: 0

.vex-scrollbar-measure
    position: absolute
    top: -9999px
    width: 50px
    height: 50px
    overflow: scroll

// IE
.vex-overlay
    background: #000
    filter: alpha(opacity=40) /* IE 5–7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" /* IE 8 */

.vex-overlay
    +vex-animation(vex-fadein .5s)
    position: fixed
    background: rgba(0, 0, 0, .4)
    top: 0
    right: 0
    bottom: 0
    left: 0

    .vex.vex-closing &
        +vex-animation(vex-fadeout .5s)

.vex-content
    +vex-animation(vex-fadein .5s)
    background: #fff

    .vex.vex-closing &
        +vex-animation(vex-fadeout .5s)

.vex-close:before
    font-family: Arial, sans-serif
    content: "\00D7"

.vex-dialog-form
    margin: 0 // Browser reset

.vex-dialog-button
    text-rendering: optimizeLegibility
    +appearance(none)
    cursor: pointer
    -webkit-tap-highlight-color: transparent

.vex-loading-spinner
    +vex-animation(vex-rotation .7s linear infinite)
    +box-shadow(0 0 1em rgba(0, 0, 0, 0.1))
    position: fixed
    z-index: 1112
    margin: auto
    top: 0
    right: 0
    bottom: 0
    left: 0
    height: 2em
    width: 2em
    background: #fff

// Prevent background scrolling when vex is open
// https://github.com/HubSpot/vex/issues/18
body.vex-open
    overflow: hidden