@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 slide-top {
    @include keyframes(slide-top) {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-tr {
    @include keyframes(slide-tr) {
        0% {
            transform: translateY(0) translateX(0);
        }

        100% {
            transform: translateY(-100px) translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-right {
    @include keyframes(slide-right) {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-br {
    @include keyframes(slide-br) {
        0% {
            transform: translateY(0) translateX(0);
        }

        100% {
            transform: translateY(100px) translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bottom {
    @include keyframes(slide-bottom) {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bl {
    @include keyframes(slide-bl) {
        0% {
            transform: translateY(0) translateX(0);
        }

        100% {
            transform: translateY(100px) translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-left {
    @include keyframes(slide-left) {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-tl {
    @include keyframes(slide-tl) {
        0% {
            transform: translateY(0) translateX(0);
        }

        100% {
            transform: translateY(-100px) translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-center {
    @include keyframes(slide-bck-center) {
        0% {
            transform: translateZ(0);
        }

        100% {
            transform: translateZ(-400px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-top {
    @include keyframes(slide-bck-top) {
        0% {
            transform: translateZ(0) translateY(0);
        }

        100% {
            transform: translateZ(-400px) translateY(-200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-tr {
    @include keyframes(slide-bck-tr) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateY(-200px) translateX(200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-right {
    @include keyframes(slide-bck-right) {
        0% {
            transform: translateZ(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateX(200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-br {
    @include keyframes(slide-bck-br) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateY(200px) translateX(200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-bottom {
    @include keyframes(slide-bck-bottom) {
        0% {
            transform: translateZ(0) translateY(0);
        }

        100% {
            transform: translateZ(-400px) translateY(200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-bl {
    @include keyframes(slide-bck-bl) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateY(200px) translateX(-200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-left {
    @include keyframes(slide-bck-left) {
        0% {
            transform: translateZ(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateX(-200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-bck-tl {
    @include keyframes(slide-bck-tl) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(-400px) translateY(-200px) translateX(-200px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-center {
    @include keyframes(slide-fwd-center) {
        0% {
            transform: translateZ(0);
        }

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

/// @requires {mixin} keyframes
@mixin slide-fwd-top {
    @include keyframes(slide-fwd-top) {
        0% {
            transform: translateZ(0) translateY(0);
        }

        100% {
            transform: translateZ(160px) translateY(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-tr {
    @include keyframes(slide-fwd-tr) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateY(-100px) translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-right {
    @include keyframes(slide-fwd-right) {
        0% {
            transform: translateZ(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-br {
    @include keyframes(slide-fwd-br) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateY(100px) translateX(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-bottom {
    @include keyframes(slide-fwd-bottom) {
        0% {
            transform: translateZ(0) translateY(0);
        }

        100% {
            transform: translateZ(160px) translateY(100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-bl {
    @include keyframes(slide-fwd-bl) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateY(100px) translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-left {
    @include keyframes(slide-fwd-left) {
        0% {
            transform: translateZ(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-fwd-tl {
    @include keyframes(slide-fwd-tl) {
        0% {
            transform: translateZ(0) translateY(0) translateX(0);
        }

        100% {
            transform: translateZ(160px) translateY(-100px) translateX(-100px);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-top {
    @include keyframes(slide-rotate-hor-top) {
        0% {
            transform: translateY(0) rotateX(0deg);
        }

        100% {
            transform: translateY(-150px) rotateX(-90deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-t-bck {
    @include keyframes(slide-rotate-hor-t-bck) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0deg);
            transform-origin: top center;
        }

        100% {
            transform: translateY(-150px) translateZ(-230px) rotateX(-90deg);
            transform-origin: top center;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-t-fwd {
    @include keyframes(slide-rotate-hor-t-fwd) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0deg);
            transform-origin: bottom center;
        }

        100% {
            transform: translateY(-150px) translateZ(130px) rotateX(-90deg);
            transform-origin: bottom center;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-right {
    @include keyframes(slide-rotate-ver-right) {
        0% {
            transform: translateX(0) rotateY(0);
        }

        100% {
            transform: translateX(150px) rotateY(-90deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-r-bck {
    @include keyframes(slide-rotate-ver-r-bck) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: center right;
        }

        100% {
            transform: translateX(150px) translateZ(-230px) rotateY(-90deg);
            transform-origin: center right;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-r-fwd {
    @include keyframes(slide-rotate-ver-r-fwd) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: center left;
        }

        100% {
            transform: translateX(150px) translateZ(130px) rotateY(-90deg);
            transform-origin: center left;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-l-fwd {
    @include keyframes(slide-rotate-ver-l-fwd) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: center right;
        }

        100% {
            transform: translateX(-150px) translateZ(130px) rotateY(90deg);
            transform-origin: center right;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-l-bck {
    @include keyframes(slide-rotate-ver-l-bck) {
        0% {
            transform: translateX(0) translateZ(0) rotateY(0);
            transform-origin: center left;
        }

        100% {
            transform: translateX(-150px) translateZ(-230px) rotateY(90deg);
            transform-origin: center left;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-ver-left {
    @include keyframes(slide-rotate-ver-left) {
        0% {
            transform: translateX(0) rotateY(0);
        }

        100% {
            transform: translateX(-150px) rotateY(90deg);
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-b-fwd {
    @include keyframes(slide-rotate-hor-b-fwd) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0deg);
            transform-origin: top center;
        }

        100% {
            transform: translateY(150px) translateZ(130px) rotateX(90deg);
            transform-origin: top center;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-b-bck {
    @include keyframes(slide-rotate-hor-b-bck) {
        0% {
            transform: translateY(0) translateZ(0) rotateX(0deg);
            transform-origin: bottom center;
        }

        100% {
            transform: translateY(150px) translateZ(-230px) rotateX(90deg);
            transform-origin: bottom center;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slide-rotate-hor-bottom {
    @include keyframes(slide-rotate-hor-bottom) {
        0% {
            transform: translateY(0) rotateX(0deg);
        }

        100% {
            transform: translateY(150px) rotateX(90deg);
        }
    }
}