@use '../mixins' as *;

////
/// @package theming
/// @group animations
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// @requires {mixin} keyframes
@mixin bounce-out-top {
    @include keyframes(bounce-out-top) {
        0% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateY(-30px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateY(-38px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateY(-75px);
            animation-timing-function: ease-in;
        }

        70% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateY(-800px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin bounce-out-right {
    @include keyframes(bounce-out-right) {
        0% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateX(30px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateX(38px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateX(80px);
            animation-timing-function: ease-in;
        }

        65% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateX(1000px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin bounce-out-bottom {
    @include keyframes(bounce-out-bottom) {
        0% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateY(30px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateY(38px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateY(75px);
            animation-timing-function: ease-in;
        }

        70% {
            transform: translateY(0);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateY(800px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin bounce-out-left {
    @include keyframes(bounce-out-left) {
        0% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateX(-30px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateX(-38px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateX(-80px);
            animation-timing-function: ease-in;
        }

        70% {
            transform: translateX(0);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateX(-1000px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin bounce-out-bck {
    @include keyframes(bounce-out-bck) {
        0% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateZ(-100px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateZ(-110px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateZ(-200px);
            animation-timing-function: ease-in;
        }

        70% {
            transform: translateZ(0) scale(1);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateZ(-900px) scale(0);
            animation-timing-function: ease-in;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin bounce-out-fwd {
    @include keyframes(bounce-out-fwd) {
        0% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        5% {
            transform: translateZ(90px);
            animation-timing-function: ease-in;
        }

        15% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        25% {
            transform: translateZ(95px);
            animation-timing-function: ease-in;
        }

        38% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        52% {
            transform: translateZ(150px);
            animation-timing-function: ease-in;
        }

        70% {
            transform: translateZ(0);
            animation-timing-function: ease-out;
        }

        85% {
            opacity: 1;
        }

        100% {
            transform: translateZ(500px);
            animation-timing-function: ease-in;
            opacity: 0;
        }
    }
}