@import mixins

// Overlay/content animations

=keyframes-vex-fadein
    +vex-keyframes("vex-fadein")
        0%
            opacity: 0
        100%
            opacity: 1

=keyframes-vex-fadeout
    +vex-keyframes("vex-fadeout")
        0%
            opacity: 1
        100%
            opacity: 0

// Content animations

=keyframes-vex-flyin
    +vex-keyframes("vex-flyin")
        0%
            opacity: 0
            +vex-transform(translateY(-40px))
        100%
            opacity: 1
            +vex-transform(translateY(0))

=keyframes-vex-flyout
    +vex-keyframes("vex-flyout")
        0%
            opacity: 1
            +vex-transform(translateY(0))
        100%
            opacity: 0
            +vex-transform(translateY(-40px))

=keyframes-vex-dropin
    +vex-keyframes("vex-dropin")
        // We start at 0 first and, while hidden
        // move to -800px, where the animation
        // really begins. This was necessary because
        // otherwise, when starting the animation
        // at -800px, the browser scrolls up 800px
        // to try to display this object positioned
        // above the page.
        // https://github.com/HubSpot/vex/issues/21
        0%
            +vex-transform(translateY(0))
            opacity: 0
        1%
            +vex-transform(translateY(-800px))
            opacity: 0

        // Real animation begins here
        2%
            +vex-transform(translateY(-800px))
            opacity: 1
        100%
            +vex-transform(translateY(0))
            opacity: 1

=keyframes-vex-dropout
    +vex-keyframes("vex-dropout")
        0%
            +vex-transform(translateY(0))
        100%
            +vex-transform(translateY(-800px))

=keyframes-vex-slideup
    +vex-keyframes("vex-slideup")
        // We start at 0 first and, while hidden
        // move to -800px, where the animation
        // really begins. This was necessary because
        // otherwise, when starting the animation
        // at -800px, the browser scrolls up 800px
        // to try to display this object positioned
        // above the page.
        // https://github.com/HubSpot/vex/issues/21
        0%
            +vex-transform(translateY(0))
            opacity: 0
        1%
            +vex-transform(translateY(800px))
            opacity: 0

        // Real animation begins here
        2%
            +vex-transform(translateY(800px))
            opacity: 1
        100%
            +vex-transform(translateY(0))
            opacity: 1

=keyframes-vex-slidedown
    +vex-keyframes("vex-slidedown")
        0%
            +vex-transform(translateY(0))
        100%
            +vex-transform(translateY(800px))

=keyframes-vex-flipin-horizontal
    +vex-keyframes("vex-flipin-horizontal")
        0%
            opacity: 0
            +vex-transform(rotateY(-90deg))
        100%
            opacity: 1
            +vex-transform(rotateY(0deg))

=keyframes-vex-flipout-horizontal
    +vex-keyframes("vex-flipout-horizontal")
        0%
            opacity: 1
            +vex-transform(rotateY(0deg))
        100%
            opacity: 0
            +vex-transform(rotateY(90deg))

// Spinner animations

=keyframes-vex-rotation
    +vex-keyframes("vex-rotation")
        0%
            +vex-transform(rotate(0deg))
        100%
            +vex-transform(rotate(359deg))

// Button animations

=keyframes-vex-pulse
    +vex-keyframes("vex-pulse")
        0%
            +box-shadow(inset 0 0 0 300px transparent)
        70%
            +box-shadow(inset 0 0 0 300px rgba(255, 255, 255, .25))
        100%
            +box-shadow(inset 0 0 0 300px transparent)