/*!
* Visual Designer JQuery Plugin
* Author: Sam Zielke-Ryner
* Licensed under ...
*/

/*@import (less) "node_modules/magic.css/dist/magic.css";*/
@import (less) "node_modules/animate.css/animate.css";


/*TODO: create animations for each device eg .vd-slide-v-d-tablet .vd-slide-v-d-mobile */

/*
Possible solution

For each animation expand its keyframes @100% {
visibility: hidden;
position: absolute;
height: 0;
padding: 0;
}

BUT also need to make vd.release and .vd-nav-widget overflow: hidden;
*/

.vd-slide-v-u {
    /*.animate__animated;
.animate__slideOutDown;*/

    &.vd-triggered {
        /*.animate__slideInUp;*/
    }
}

.vd-slide-v-d-old {
    /*.magictime;
.slideUp;*/
    /*.animate__animated;*/
    /*.animate__slideOutUp;*/
    /*.vdslideOutUp;*/

    &.vd-triggered {
        /*.slideUpReturn;*/
        /*.animate__slideInDown;*/
    }
}


.vd-slide-v-d {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: 400ms cubic-bezier(0.23, 1, 0.32, 1);

    &.vd-triggered {
        max-height: 9999px !important;
        overflow: visible !important;
        /*overflow-y: scroll !important;*/
    }

    &:not(.vd-triggered) {
        padding: 0 !important;
        border: none !important;
    }
}


.vd-slide-h-l {
    /*.animate__animated;
.animate__slideOutLeft;*/

    &.vd-triggered {
        /*.animate__slideInLeft;*/
    }
}

.vd-slide-h-r {
    /*.animate__animated;
.animate__slideOutRight;*/

    &.vd-triggered {
        /*.animate__slideInRight;*/
    }
}


.vd-fade-in {
    .animate__animated;
    .animate__fadeOut;

    &.vd-triggered {
        .animate__fadeIn;
    }
}

.vd-fade-in-down {
    .animate__animated;
    .animate__fadeOutUp;

    &.vd-triggered {
        .animate__fadeInDown;
    }
}

.vd-fade-in-up {
    .animate__animated;
    .animate__fadeOutDown;

    &.vd-triggered {
        .animate__fadeInUp;
    }
}

.vd-fade-in-left {
    .animate__animated;
    .animate__fadeOutLeft;

    &.vd-triggered {
        .animate__fadeInLeft;
    }
}

.vd-fade-in-right {
    .animate__animated;
    .animate__fadeOutRight;

    &.vd-triggered {
        .animate__fadeInRight;
    }
}

.vd-flip-in-x {
    .animate__animated;
    .animate__flipOutX;

    &.vd-triggered {
        .animate__flipInX;
    }
}

.vd-flip-in-y {
    .animate__animated;
    .animate__flipOutY;

    &.vd-triggered {
        .animate__flipInY;
    }
}


.disable-anim {
    -webkit-animation-name: none;
    animation-name: none;

    &.vd-slide-v-d {
        max-height: 100vh !important;
        overflow: visible !important;
        padding: initial !important;
    }
}

@media (min-width: 769px) {
    body:not(.vd-rtablet):not(.vd-rmobile) .vd-desktop-no-anim {
        .disable-anim();
    }
}

body.vd-rtablet .vd-tablet-no-anim {
    .disable-anim();
}

@media (max-width: 768px) and (min-width: 415px) {
    .vd-tablet-no-anim {
        .disable-anim();
    }
}

body.vd-rmobile .vd-mobile-no-anim {
    .disable-anim();
}

@media (max-width: 479px) {
    .vd-mobile-no-anim {
        .disable-anim();
    }
}