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

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

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

        100% {
            transform: rotate(-540deg) scale(0);
            transform-origin: 100% 50%;
            opacity: 0;
        }
    }
}

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

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

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

        100% {
            transform: rotate(540deg) scale(5);
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 100% 50%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 0 100%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(-540deg) scale(0);
            transform-origin: 50% 0%;
            opacity: 0;
        }
    }
}

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

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

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

        100% {
            transform: rotate(-540deg) scale(0);
            transform-origin: 0 50%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 50% 0%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 100% 100%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 0 50%;
            opacity: 0;
        }
    }
}

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

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

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

        100% {
            transform: rotate(-540deg) scale(0);
            transform-origin: 50% 100%;
            opacity: 0;
        }
    }
}

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

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

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 100% 0%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(540deg) scale(5);
            transform-origin: 50% 100%;
            opacity: 0;
        }
    }
}

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

        100% {
            transform: rotate(720deg) scale(5);
            transform-origin: 0 0;
            opacity: 0;
        }
    }
}