@import mixins

// Overlay/content animations

=keyframes-vex-fadein
    @keyframes vex-fadein
        0%
            opacity: 0
        100%
            opacity: 1

=keyframes-vex-fadeout
    @keyframes vex-fadeout
        0%
            opacity: 1
        100%
            opacity: 0

// Content animations

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

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

=keyframes-vex-dropin
    @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%
            transform: translateY(0)
            opacity: 0
        1%
            transform: translateY(-800px)
            opacity: 0

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

=keyframes-vex-dropout
    @keyframes vex-dropout
        0%
            transform: translateY(0)
        100%
            transform: translateY(-800px)

=keyframes-vex-slideup
    @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%
            transform: translateY(0)
            opacity: 0
        1%
            transform: translateY(800px)
            opacity: 0

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

=keyframes-vex-slidedown
    @keyframes vex-slidedown
        0%
            transform: translateY(0)
        100%
            transform: translateY(800px)

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

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

// Spinner animations

=keyframes-vex-rotation
    @keyframes vex-rotation
        0%
            transform: rotate(0deg)
        100%
            transform: rotate(359deg)

// Button animations

=keyframes-vex-pulse
    @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