@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 slit-out-vertical {
    @include keyframes(slit-out-vertical) {
        0% {
            transform: translateZ(0) rotateY(0);
            opacity: 1;
        }

        54% {
            transform: translateZ(-160px) rotateY(87deg);
            opacity: 1;
        }

        100% {
            transform: translateZ(-800px) rotateY(90deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slit-out-horizontal {
    @include keyframes(slit-out-horizontal) {
        0% {
            transform: translateZ(0) rotateX(0);
            opacity: 1;
        }

        54% {
            transform: translateZ(-160px) rotateX(87deg);
            opacity: 1;
        }

        100% {
            transform: translateZ(-800px) rotateX(90deg);
            opacity: 0;
        }
    }
}

/// @requires {mixin} keyframes
@mixin slit-out-diagonal-1 {
    @include keyframes(slit-out-diagonal-1) {
        0% {
            transform: translateZ(0) rotate3d(1, 1, 0, 0);
            opacity: 1;
        }

        54% {
            transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
            opacity: 1;
        }

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

/// @requires {mixin} keyframes
@mixin slit-out-diagonal-2 {
    @include keyframes(slit-out-diagonal-2) {
        0% {
            transform: translateZ(0) rotate3d(-1, 1, 0, 0);
            opacity: 1;
        }

        54% {
            transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
            opacity: 1;
        }

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