// Spin animation
.spin {
    @include spinner-animation();
}

// Bounce animation
.bounce {
    @include bounce-animation();
}

// Shake animation
.shake {
    @include shake-animation();
}

// Shaking animation with a single repetition
.shaking {
    @include shake-animation($repetition-amount: 1);
}

// Fade animation
.fade {
    @include fade-animation();
}



// Animation effects classes
.\@slideInFadeRight {
    @include slide-animation($direction: 'right');

    &.removing {
        translate: 100%;
        opacity: 0;
    }
}

.\@slideInFadeLeft {
    @include slide-animation($direction: 'left');

    &.removing {
        translate: -100%;
        opacity: 0;
    }
}

.\@slideInFadeUp {
    @include slide-animation($direction: 'up');

    &.removing {
        translate: 0 -100%;
        opacity: 0;
    }
}

.\@slideInFadeDown {
    @include slide-animation($direction: 'down');

    &.removing {
        translate: 0 100%;
        opacity: 0;
    }
}

.\@fade {
    @include slide-animation($direction: 'static');

    &.removing {
        opacity: 0;
    }
}

.\@bounce {
    transform: translateY(0);
    opacity: 1;

    @include bounce-animation($duration: 1s, $offset: 2rem, $repetition-amount: 1);
}