/*----------------------------------------------------------------*/
/*  Animations
/*----------------------------------------------------------------*/
@import "mixins";

@mixin easingOutQuadTimingTransition($duration) {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    transition-property: none;
    transition-duration: $duration;
    transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

// Slide Up
.animate-slide-up {
    @include easingOutQuadTimingTransition(400ms);
    opacity: 1;
    // Enter & Leave
    &.ng-enter {
        @include transform(translateY(100%));
        opacity: 0;

        &.ng-enter-active {
            transition-property: all;
            @include transform(translateY(0));
            opacity: 1;
        }
    }

    &.ng-leave {
        @include transform(translateY(0));
        opacity: 1;

        &.ng-leave-active {
            transition-property: all;
            @include transform(translateY(-100%));
            opacity: 0;
        }
    }
    // Hide
    &.ng-hide {
        @include transform(translateY(-100%));
        opacity: 0;
    }

    &.ng-hide-add-active,
    &.ng-hide-remove-active {
        transition-property: all;
    }
}

// Slide Down
.animate-slide-down {
    @include easingOutQuadTimingTransition(400ms);
    opacity: 1;
    // Enter & Leave
    &.ng-enter {
        @include transform(translateY(-100%));
        opacity: 0;

        &.ng-enter-active {
            transition-property: all;
            @include transform(translateY(0));
            opacity: 1;
        }
    }

    &.ng-leave {
        @include transform(translateY(0));
        opacity: 1;

        &.ng-leave-active {
            transition-property: all;
            @include transform(translateY(100%));
            opacity: 0;
        }
    }
    // Hide
    &.ng-hide {
        @include transform(translateY(-100%));
        opacity: 0;
    }

    &.ng-hide-add-active,
    &.ng-hide-remove-active {
        transition-property: all;
    }
}

// Slide Left
.animate-slide-left {
    @include easingOutQuadTimingTransition(400ms);
    opacity: 1;
    // Enter & Leave
    &.ng-enter {
        @include transform(translateX(100%));
        opacity: 0;

        &.ng-enter-active {
            transition-property: all;
            @include transform(translateX(0));
            opacity: 1;
        }
    }

    &.ng-leave {
        transform: translateX(0);
        opacity: 1;

        &.ng-leave-active {
            transition-property: all;
            @include transform(translateX(-100%));
            opacity: 0;
        }
    }
    // Hide
    &.ng-hide {
        @include transform(translateX(-100%));
        opacity: 0;
    }

    &.ng-hide-add-active,
    &.ng-hide-remove-active {
        transition-property: all;
    }
}

// Slide Right
.animate-slide-right {
    @include easingOutQuadTimingTransition(400ms);
    opacity: 1;
    // Enter & Leave
    &.ng-enter {
        @include transform(translateX(-100%));
        opacity: 0;

        &.ng-enter-active {
            transition-property: all;
            @include transform(translateX(0));
            opacity: 1;
        }
    }

    &.ng-leave {
        @include transform(translateX(0));
        opacity: 1;

        &.ng-leave-active {
            transition-property: all;
            @include transform(translateX(100%));
            opacity: 0;
        }
    }
    // Hide
    &.ng-hide {
        @include transform(translateX(100%));
        opacity: 0;
    }

    &.ng-hide-add-active,
    &.ng-hide-remove-active {
        transition-property: all;
    }
}

// Fade in & out
.animate-fade-in-out {
    @include easingOutQuadTimingTransition(400ms);
    opacity: 1;
    // Enter & Leave
    &.ng-enter {
        opacity: 0;

        &.ng-enter-active {
            transition-property: all;
            opacity: 1;
        }
    }

    &.ng-leave {
        opacity: 1;

        &.ng-leave-active {
            transition-property: all;
            opacity: 0;
        }
    }
    // Hide
    &.ng-hide {
        opacity: 0;
    }

    &.ng-hide-add-active,
    &.ng-hide-remove-active {
        transition-property: all;
    }
}

// Rotate
.animate-rotate {
    animation: rotate 1.75s linear infinite;
}

// Bounce
.animate-bounce {
    // Enter
    &.ng-enter {
        animation-duration: 0.3s;
        animation-name: bounce;
        @include transition(all 0.3s cubic-bezier(0.35, 0, 0.25, 1));
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        @include transform(translateX(-500px));
    }

    65% {
        opacity: 1;
        @include transform(translateX(0));
    }

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

@keyframes slide-in-right {
    0% {
        opacity: 0;
        @include transform(translateX(500px));
    }

    65% {
        opacity: 1;
        @include transform(translateX(0));
    }

    100% {
        @include transform(translateX(0));
    }
}

@keyframes slide-in-bottom {
    0% {
        opacity: 0;
        @include transform(translateY(200px));
    }

    65% {
        opacity: 1;
        @include transform(translateY(0));
    }

    100% {
        @include transform(translateY(0));
    }
}

@keyframes rotate {
    0% {
        @include transform(rotate(0deg));
    }

    100% {
        @include transform(rotate(360deg));
    }
}

// Bounce
@keyframes bounce {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    to {
        transform: scale(1.0);
    }
}

@-moz-keyframes bounce {
    from {
        opacity: 0;
        -moz-transform: scale(0.95);
    }

    70% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }

    to {
        -moz-transform: scale(1.0);
    }
}

@-webkit-keyframes bounce {
    from {
        opacity: 0;
        -webkit-transform: scale(0.95);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    to {
        -webkit-transform: scale(1.0);
    }
}

@-ms-keyframes bounce {
    from {
        opacity: 0;
        -ms-transform: scale(0.95);
    }

    70% {
        opacity: 1;
        -ms-transform: scale(1.05);
    }

    to {
        -ms-transform: scale(1.0);
    }
}

@-o-keyframes bounce {
    from {
        opacity: 0;
        -o-transform: scale(0.95);
    }

    70% {
        opacity: 1;
        -o-transform: scale(1.05);
    }

    to {
        -o-transform: scale(1.0);
    }
}

// Shake
.animate-shake {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;

    &.animate {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }
}

@-webkit-keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
        -webkit-transform: scale(0.95);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
        -webkit-transform: scale(0.95);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
        -webkit-transform: scale(0.95);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
        -webkit-transform: scale(0.95);
    }
}

@-ms-keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
        -ms-transform: scale(0.95);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
        -ms-transform: scale(0.95);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
        -ms-transform: scale(0.95);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
        -ms-transform: scale(0.95);
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-o-keyframes shake {
    10%, 90% {
        -o-transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        -o-transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        -o-transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        -o-transform: translate3d(4px, 0, 0);
    }
}