// Some of the animations are from animate.css (https://daneden.github.io/animate.css)

@use "./helpers" as h;
@use "./variables" as vars;

// Spin around
@keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

// Fade out
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

// Fade In
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes append-animate {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/**
 * Vue Transitions
 */

// Fade
.fade-enter-active,
.fade-leave-active {
    transition: opacity h.useVar("animation-speed-fast")
        h.useVar("transition-timing");
}

.fade-enter,
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

// Zoom In
.zoom-in-enter-active,
.zoom-in-leave-active {
    transition: opacity h.useVar("animation-speed-fast")
        h.useVar("transition-timing");

    .animation-content {
        transition: transform h.useVar("animation-speed-fast")
            h.useVar("transition-timing");
    }
}

.zoom-in-enter,
.zoom-in-enter-from,
.zoom-in-leave-active {
    opacity: 0;

    .animation-content {
        transform: scale(0.95);
    }
}

// Zoom Out
.zoom-out-enter-active,
.zoom-out-leave-active {
    transition: opacity h.useVar("animation-speed-fast")
        h.useVar("transition-timing");

    .animation-content {
        transition: transform h.useVar("animation-speed-fast")
            h.useVar("transition-timing");
    }
}

.zoom-out-enter,
.zoom-out-enter-from,
.zoom-out-leave-active {
    opacity: 0;

    .animation-content {
        transform: scale(1.05);
    }
}

// Slide
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
    transition: transform vars.$animation-speed
        cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.slide-prev-leave-to,
.slide-next-enter,
.slide-next-enter-from {
    transform: translate3d(-100%, 0, 0);
    position: absolute;
    width: 100%;
}

.slide-prev-enter,
.slide-prev-enter-from,
.slide-next-leave-to {
    transform: translate3d(100%, 0, 0);
    position: absolute;
    width: 100%;
}

.slide-down-enter-active,
.slide-down-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
    transition: transform vars.$animation-speed
        cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.slide-down-enter,
.slide-up-leave-to,
.slide-down-enter-from {
    transform: translate3d(0, -100%, 0);
    position: absolute;
    height: 100%;
}

.slide-up-enter,
.slide-up-enter-from,
.slide-down-leave-to {
    transform: translate3d(0, 100%, 0);
    position: absolute;
    height: 100%;
}

.slide-enter-active {
    transition: h.useVar("animation-speed-fast") h.useVar("transition-timing");
}

.slide-leave-active {
    transition: h.useVar("animation-speed-fast") h.useVar("transition-timing");
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-leave,
.slide-enter-to,
.slide-leave-from {
    max-height: 100px;
    overflow: hidden;
}

.slide-enter,
.slide-enter-from,
.slide-leave-to {
    overflow: hidden;
    max-height: 0;
}