@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 swing-out-top-bck {
    @include keyframes(swing-out-top-bck) {
        0% {
            transform: rotateX(0deg);
            transform-origin: top;
            opacity: 1;
        }

        100% {
            transform: rotateX(-100deg);
            transform-origin: top;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-top-fwd {
    @include keyframes(swing-out-top-fwd) {
        0% {
            transform: rotateX(0deg);
            transform-origin: top;
            opacity: 1;
        }

        100% {
            transform: rotateX(70deg);
            transform-origin: top;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-right-bck {
    @include keyframes(swing-out-right-bck) {
        0% {
            transform: rotateY(0);
            transform-origin: right;
            opacity: 1;
        }

        100% {
            transform: rotateY(-100deg);
            transform-origin: right;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-right-fwd {
    @include keyframes(swing-out-right-fwd) {
        0% {
            transform: rotateY(0);
            transform-origin: right;
            opacity: 1;
        }

        100% {
            transform: rotateY(70deg);
            transform-origin: right;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-bottom-bck {
    @include keyframes(swing-out-bottom-bck) {
        0% {
            transform: rotateX(0);
            transform-origin: bottom;
            opacity: 1;
        }

        100% {
            transform: rotateX(100deg);
            transform-origin: bottom;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-bottom-fwd {
    @include keyframes(swing-out-bottom-fwd) {
        0% {
            transform: rotateX(0);
            transform-origin: bottom;
            opacity: 1;
        }

        100% {
            transform: rotateX(-70deg);
            transform-origin: bottom;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-left-bck {
    @include keyframes(swing-out-left-bck) {
        0% {
            transform: rotateY(0);
            transform-origin: left;
            opacity: 1;
        }

        100% {
            transform: rotateY(100deg);
            transform-origin: left;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin swing-out-left-fwd {
    @include keyframes(swing-out-left-fwd) {
        0% {
            transform: rotateY(0);
            transform-origin: left;
            opacity: 1;
        }

        100% {
            transform: rotateY(-70deg);
            transform-origin: left;
            opacity: 0;
        }
    }
}