// Some of the animations are from animate.css (https://daneden.github.io/animate.css)
@use "bulma/sass/utilities/css-variables" as cv;

// 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;
}

/**
 * Vue Transitions
 */

// Fade
.fade-enter-active,
.fade-leave-active {
    transition: opacity cv.getVar("speed-slow") cv.getVar("easing");
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

// Zoom In
.zoom-in-enter-active,
.zoom-in-leave-active {
    transition: opacity cv.getVar("speed-slow") cv.getVar("easing");
    .animation-content,
    .animation-content {
        transition: transform cv.getVar("speed-slow") cv.getVar("easing");
    }
}
.zoom-in-enter-from,
.zoom-in-leave-active {
    opacity: 0;
    .animation-content,
    .animation-content {
        transform: scale(0.95);
    }
}


// Zoom Out
.zoom-out-enter-active,
.zoom-out-leave-active {
    transition: opacity cv.getVar("speed-slow") cv.getVar("easing");
    .animation-content,
    .animation-content {
        transition: transform cv.getVar("speed-slow") cv.getVar("easing");
    }
}
.zoom-out-enter-from,
.zoom-out-leave-active {
    opacity: 0;
    .animation-content,
    .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 cv.getVar("speed-slower") cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.slide-prev-leave-to, .slide-next-enter-from {
    transform: translate3d(-100%, 0, 0);
    position: absolute;
    width: 100%;
}
.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 cv.getVar("speed-slower") cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.slide-up-leave-to, .slide-down-enter-from {
    transform: translate3d(0, -100%, 0);
    position: absolute;
    height: 100%;
}
.slide-up-enter-from, .slide-down-leave-to {
    transform: translate3d(0, 100%, 0);
    position: absolute;
    height: 100%;
}

.slide-enter-active {
    transition: cv.getVar("speed-slow") cv.getVar("easing");
}
.slide-leave-active {
    transition: cv.getVar("speed-slow") cv.getVar("easing");
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slide-enter-to, .slide-leave-from {
    max-height: 100px;
    overflow: hidden;
}
.slide-enter-from, .slide-leave-to {
    overflow: hidden;
    max-height: 0;
}