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

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

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

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

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

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

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

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

/// @requires {mixin} keyframes
@mixin flip-out-diag-1-tr {
    @include keyframes(flip-out-diag-1-tr) {
        0% {
            transform: rotate3d(1, 1, 0, 0deg);
            opacity: 1;
        }

        100% {
            transform: rotate3d(1, 1, 0, 70deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-out-diag-1-bl {
    @include keyframes(flip-out-diag-1-bl) {
        0% {
            transform: rotate3d(1, 1, 0, 0deg);
            opacity: 1;
        }

        100% {
            transform: rotate3d(1, 1, 0, -70deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-out-diag-2-tl {
    @include keyframes(flip-out-diag-2-tl) {
        0% {
            transform: rotate3d(1, 1, 0, 0deg);
            opacity: 1;
        }

        100% {
            transform: rotate3d(-1, 1, 0, -70deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-out-diag-2-br {
    @include keyframes(flip-out-diag-2-br) {
        0% {
            transform: rotate3d(1, 1, 0, 0deg);
            opacity: 1;
        }

        100% {
            transform: rotate3d(-1, 1, 0, 70deg);
            opacity: 0;
        }
    }
}