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

        100% {
            transform: rotate(-360deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-bl {
    @include keyframes(rotate-out-bl) {
        0% {
            transform: rotate(0);
            transform-origin: bottom left;
            opacity: 1;
        }

        100% {
            transform: rotate(-360deg);
            transform-origin: bottom left;
            opacity: 0;
        }
    }
}

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

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

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

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

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

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

/// @requires {mixin} keyframes
@mixin rotate-out-tr {
    @include keyframes(rotate-out-tr) {
        0% {
            transform: rotate(0);
            transform-origin: top right;
            opacity: 1;
        }

        100% {
            transform: rotate(-360deg);
            transform-origin: top right;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-tl {
    @include keyframes(rotate-out-tl) {
        0% {
            transform: rotate(0);
            transform-origin: top left;
            opacity: 1;
        }

        100% {
            transform: rotate(-360deg);
            transform-origin: top left;
            opacity: 0;
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin rotate-out-2-cw {
    @include keyframes(rotate-out-2-cw) {
        0% {
            transform: rotate(0);
            opacity: 1;
        }

        100% {
            transform: rotate(45deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-ccw {
    @include keyframes(rotate-out-2-ccw) {
        0% {
            transform: rotate(0);
            opacity: 1;
        }

        100% {
            transform: rotate(-45deg);
            opacity: 0;
        }
    }
}

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

        100% {
            transform: translateZ(-180px) rotate(-45deg);
            opacity: 0;
        }
    }
}

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

        100% {
            transform: translateZ(180px) rotate(45deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-tr-cw {
    @include keyframes(rotate-out-2-tr-cw) {
        0% {
            transform: rotate(0);
            transform-origin: 100% 0%;
            opacity: 1;
        }

        100% {
            transform: rotate(45deg);
            transform-origin: 100% 0%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-tr-ccw {
    @include keyframes(rotate-out-2-tr-ccw) {
        0% {
            transform: rotate(0);
            transform-origin: 100% 0%;
            opacity: 1;
        }

        100% {
            transform: rotate(-45deg);
            transform-origin: 100% 0%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-br-cw {
    @include keyframes(rotate-out-2-br-cw) {
        0% {
            transform: rotate(0);
            transform-origin: 100% 100%;
            opacity: 1;
        }

        100% {
            transform: rotate(45deg);
            transform-origin: 100% 100%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-br-ccw {
    @include keyframes(rotate-out-2-br-ccw) {
        0% {
            transform: rotate(0);
            transform-origin: 100% 100%;
            opacity: 1;
        }

        100% {
            transform: rotate(-45deg);
            transform-origin: 100% 100%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-bl-cw {
    @include keyframes(rotate-out-2-bl-cw) {
        0% {
            transform: rotate(0);
            transform-origin: 0 100%;
            opacity: 1;
        }

        100% {
            transform: rotate(45deg);
            transform-origin: 0 100%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-bl-ccw {
    @include keyframes(rotate-out-2-bl-ccw) {
        0% {
            transform: rotate(0);
            transform-origin: 0 100%;
            opacity: 1;
        }

        100% {
            transform: rotate(-45deg);
            transform-origin: 0 100%;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-tl-cw {
    @include keyframes(rotate-out-2-tl-cw) {
        0% {
            transform: rotate(0);
            transform-origin: 0 0;
            opacity: 1;
        }

        100% {
            transform: rotate(45deg);
            transform-origin: 0 0;
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin rotate-out-2-tl-ccw {
    @include keyframes(rotate-out-2-tl-ccw) {
        0% {
            transform: rotate(0);
            transform-origin: 0 0;
            opacity: 1;
        }

        100% {
            transform: rotate(-45deg);
            transform-origin: 0 0;
            opacity: 0;
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin rotate-out-br {
    @include keyframes(rotate-out-br) {
        0% {
            transform: rotate(0);
            transform-origin: bottom right;
            opacity: 1;
        }

        100% {
            transform: rotate(-360deg);
            transform-origin: bottom right;
            opacity: 0;
        }
    }
}

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

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

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

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

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

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