@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 fade-out-bck {
    @include keyframes(fade-out-bck) {
        0% {
            transform: translateZ(0);
            opacity: 1;
        }

        100% {
            transform: translateZ(-80px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin fade-out-bl {
    @include keyframes(fade-out-bl) {
        0% {
            transform: translateX(0) translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-bottom {
    @include keyframes(fade-out-bottom) {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-br {
    @include keyframes(fade-out-br) {
        0% {
            transform: translateX(0) translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-fwd {
    @include keyframes(fade-out-fwd) {
        0% {
            transform: translateZ(0);
            opacity: 1;
        }

        100% {
            transform: translateZ(80px);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin fade-out-left {
    @include keyframes(fade-out-left) {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-right {
    @include keyframes(fade-out-right) {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-tl {
    @include keyframes(fade-out-tl) {
        0% {
            transform: translateX(0) translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-top {
    @include keyframes(fade-out-top) {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out-tr {
    @include keyframes(fade-out-tr) {
        0% {
            transform: translateX(0) translateY(0);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin fade-out {
    @include keyframes(fade-out) {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}