// Rotating loader
@include keyframes(spin) {
    100% {
        @include transform(rotate(360deg));
    }
}

//Spinner
@include keyframes(fadeIn) {
    0% {
        @include transform(translateX(1rem));
        @include filter(blur(5px));
        opacity: 0;
    }
    1.6% {
        @include transform(translateX(.2rem));
        @include filter(blur(0));
        opacity: 1;
    }
    12% {
        @include transform(translateX(-.2rem));
        @include filter(blur(0));
        opacity: 1;
    }
    16% {
        @include transform(translateX(-1rem));
        @include filter(blur(5px));
        opacity: 0;
    }
    100% {
        @include transform(translateX(-1rem));
        @include filter(blur(5px));
        opacity: 0;
    }
}

//Loading
@include keyframes(loading) {
    0% {
        @include filter(blur(5px));
        opacity: 0;
    }
    100% {
        @include filter(blur(0));
        opacity: 1;
    }
}

@include keyframes(formSlide) {
    0% {
        @include filter(blur(5px));
        @include transform(translateY(10rem));
        opacity: 0;
    }
    50% {
        @include filter(blur(0));
    }
    100% {
        @include transform(translateY(0));
        opacity: 1;
    }
}