@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 roll-in-left {
    @include keyframes(roll-in-left) {
        0% {
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0;
        }

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

/// @requires {mixin} keyframes
@mixin roll-in-top {
    @include keyframes(roll-in-top) {
        0% {
            transform: translateY(-800px) rotate(-540deg);
            opacity: 0;
        }

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

/// @requires {mixin} keyframes
@mixin roll-in-right {
    @include keyframes(roll-in-right) {
        0% {
            transform: translateX(800px) rotate(540deg);
            opacity: 0;
        }

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

/// @requires {mixin} keyframes
@mixin roll-in-bottom {
    @include keyframes(roll-in-bottom) {
        0% {
            transform: translateY(800px) rotate(540deg);
            opacity: 0;
        }

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