@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-horizontal-bottom {
    @include keyframes(flip-horizontal-bottom) {
        0% {
            transform: rotateX(0);
        }

        100% {
            transform: rotateX(-180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-vertical-bck {
    @include keyframes(flip-vertical-bck) {
        0% {
            transform: translateZ(0) rotateY(0);
        }

        100% {
            transform: translateZ(-260px) rotateY(-180deg);
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin flip-horizontal-top {
    @include keyframes(flip-horizontal-top) {
        0% {
            transform: rotateX(0);
        }

        100% {
            transform: rotateX(180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-vertical-fwd {
    @include keyframes(flip-vertical-fwd) {
        0% {
            transform: translateZ(0) rotateY(0);
        }

        100% {
            transform: translateZ(160px) rotateY(180deg);
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin flip-horizontal-bck {
    @include keyframes(flip-horizontal-bck) {
        0% {
            transform: translateZ(0) rotateX(0);
        }

        100% {
            transform: translateZ(-260px) rotateX(180deg);
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin flip-diagonal-2-bck {
    @include keyframes(flip-diagonal-2-bck) {
        0% {
            transform: translateZ(0) rotate3d(-1, 1, 0, 0deg);
        }

        100% {
            transform: translateZ(-260px) rotate3d(-1, 1, 0, -180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-horizontal-fwd {
    @include keyframes(flip-horizontal-fwd) {
        0% {
            transform: translateZ(0) rotateX(0);
        }

        100% {
            transform: translateZ(160px) rotateX(-180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-diagonal-2-fwd {
    @include keyframes(flip-diagonal-2-fwd) {
        0% {
            transform: translateZ(0) rotate3d(-1, 1, 0, 0deg);
        }

        100% {
            transform: translateZ(160px) rotate3d(-1, 1, 0, 180deg);
        }
    }
}

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

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

/// @requires {mixin} keyframes
@mixin flip-vertical-right {
    @include keyframes(flip-vertical-right) {
        0% {
            transform: rotateY(0);
        }

        100% {
            transform: rotateY(180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-diagonal-1-bck {
    @include keyframes(flip-diagonal-1-bck) {
        0% {
            transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        }

        100% {
            transform: translateZ(-260px) rotate3d(1, 1, 0, -180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-vertical-left {
    @include keyframes(flip-vertical-left) {
        0% {
            transform: rotateY(0);
        }

        100% {
            transform: rotateY(-180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-diagonal-1-fwd {
    @include keyframes(flip-diagonal-1-fwd) {
        0% {
            transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        }

        100% {
            transform: translateZ(160px) rotate3d(1, 1, 0, 180deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-top-1 {
    @include keyframes(flip-2-hor-top-1) {
        0% {
            transform: translateY(0) rotateX(0);
            transform-origin: 50% 0%;
        }

        100% {
            transform: translateY(-100%) rotateX(-180deg);
            transform-origin: 50% 100%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-right-bck {
    @include keyframes(flip-2-ver-right-bck) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: 100% 50%;
        }

        100% {
            transform: translateX(100%) translateZ(-260px) rotateY(180deg);
            transform-origin: 0% 50%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-left-1 {
    @include keyframes(flip-2-ver-left-1) {
        0% {
            transform: translateX(0) rotateY(0);
            transform-origin: 0% 50%;
        }

        100% {
            transform: translateX(-100%) rotateY(180deg);
            transform-origin: 100% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-top-2 {
    @include keyframes(flip-2-hor-top-2) {
        0% {
            transform: translateY(0) rotateX(0);
            transform-origin: 50% 0%;
        }

        100% {
            transform: translateY(-100%) rotateX(180deg);
            transform-origin: 50% 100%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-right-fwd {
    @include keyframes(flip-2-ver-right-fwd) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: 100% 50%;
        }

        100% {
            transform: translateX(100%) translateZ(160px) rotateY(-180deg);
            transform-origin: 0% 50%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-left-2 {
    @include keyframes(flip-2-ver-left-2) {
        0% {
            transform: translateX(0) rotateY(0);
            transform-origin: 0% 50%;
        }

        100% {
            transform: translateX(-100%) rotateY(-180deg);
            transform-origin: 100% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-top-bck {
    @include keyframes(flip-2-hor-top-bck) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0);
            transform-origin: 50% 0%;
        }

        100% {
            transform: translateY(-100%) translateZ(-260px) rotateX(180deg);
            transform-origin: 50% 100%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-bottom-1 {
    @include keyframes(flip-2-hor-bottom-1) {
        0% {
            transform: translateY(0) rotateX(0);
            transform-origin: 50% 100%;
        }

        100% {
            transform: translateY(100%) rotateX(180deg);
            transform-origin: 50% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-left-bck {
    @include keyframes(flip-2-ver-left-bck) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: 0% 50%;
        }

        100% {
            transform: translateX(-100%) translateZ(-260px) rotateY(-180deg);
            transform-origin: 100% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-top-fwd {
    @include keyframes(flip-2-hor-top-fwd) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0);
            transform-origin: 50% 0%;
        }

        100% {
            transform: translateY(-100%) translateZ(160px) rotateX(-180deg);
            transform-origin: 50% 100%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-bottom-2 {
    @include keyframes(flip-2-hor-bottom-2) {
        0% {
            transform: translateY(0) rotateX(0);
            transform-origin: 50% 100%;
        }

        100% {
            transform: translateY(100%) rotateX(-180deg);
            transform-origin: 50% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-left-fwd {
    @include keyframes(flip-2-ver-left-fwd) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: 0% 50%;
        }

        100% {
            transform: translateX(-100%) translateZ(160px) rotateY(180deg);
            transform-origin: 100% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-right-1 {
    @include keyframes(flip-2-ver-right-1) {
        0% {
            transform: translateX(0) rotateY(0);
            transform-origin: 100% 50%;
        }

        100% {
            transform: translateX(100%) rotateY(-180deg);
            transform-origin: 0% 50%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-bottom-bck {
    @include keyframes(flip-2-hor-bottom-bck) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0);
            transform-origin: 50% 100%;
        }

        100% {
            transform: translateY(100%) translateZ(-260px) rotateX(-180deg);
            transform-origin: 50% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-ver-right-2 {
    @include keyframes(flip-2-ver-right-2) {
        0% {
            transform: translateX(0) rotateY(0);
            transform-origin: 100% 50%;
        }

        100% {
            transform: translateX(100%) rotateY(180deg);
            transform-origin: 0% 50%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-2-hor-bottom-fwd {
    @include keyframes(flip-2-hor-bottom-fwd) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0);
            transform-origin: 50% 100%;
        }

        100% {
            transform: translateY(100%) translateZ(160px) rotateX(180deg);
            transform-origin: 50% 0%;
        }
    }
}

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

        50% {
            transform: scale(2.5) rotateX(-90deg);
        }

        100% {
            transform: scale(1) rotateX(-180deg);
        }
    }
}

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

        50% {
            transform: scale(2.5) rotate3d(-1, 1, 0, 90deg);
        }

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

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

        50% {
            transform: scale(0.4) rotateX(90deg);
        }

        100% {
            transform: scale(1) rotateX(180deg);
        }
    }
}

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

        50% {
            transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
        }

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

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

        50% {
            transform: scale(2.5) rotateY(90deg);
        }

        100% {
            transform: scale(1) rotateY(180deg);
        }
    }
}

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

        50% {
            transform: scale(0.4) rotateY(-90deg);
        }

        100% {
            transform: scale(1) rotateY(-180deg);
        }
    }
}

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

        50% {
            transform: scale(2.5) rotate3d(1, 1, 0, 90deg);
        }

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

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

        50% {
            transform: scale(0.4) rotate3d(1, 1, 0, -90deg);
        }

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

/// @requires {mixin} keyframes
@mixin flip-scale-2-hor-top {
    @include keyframes(flip-scale-2-hor-top) {
        0% {
            transform: translateY(0) rotateX(0) scale(1);
            transform-origin: 50% 0%;
        }

        50% {
            transform: translateY(-50%) rotateX(-90deg) scale(2);
            transform-origin: 50% 50%;
        }

        100% {
            transform: translateY(-100%) rotateX(-180deg) scale(1);
            transform-origin: 50% 100%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-scale-2-ver-right {
    @include keyframes(flip-scale-2-ver-right) {
        0% {
            transform: translateX(0) rotateY(0) scale(1);
            transform-origin: 100% 50%;
        }

        50% {
            transform: translateX(50%) rotateY(-90deg) scale(2);
            transform-origin: 50% 50%;
        }

        100% {
            transform: translateX(100%) rotateY(-180deg) scale(1);
            transform-origin: 0% 50%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-scale-2-hor-bottom {
    @include keyframes(flip-scale-2-hor-bottom) {
        0% {
            transform: translateY(0) rotateX(0) scale(1);
            transform-origin: 50% 100%;
        }

        50% {
            transform: translateY(50%) rotateX(90deg) scale(2);
            transform-origin: 50% 50%;
        }

        100% {
            transform: translateY(100%) rotateX(180deg) scale(1);
            transform-origin: 50% 0%;
        }
    }
}

/// @requires {mixin} keyframes
@mixin flip-scale-2-ver-left {
    @include keyframes(flip-scale-2-ver-left) {
        0% {
            transform: translateX(0) rotateY(0) scale(1);
            transform-origin: 0% 50%;
        }

        50% {
            transform: translateX(-50%) rotateY(90deg) scale(2);
            transform-origin: 50% 50%;
        }

        100% {
            transform: translateX(-100%) rotateY(180deg) scale(1);
            transform-origin: 100% 50%;
        }
    }
}