/**
   FADE
 */
.fade-enter-active:not(.no-anim),
.fade-leave-active:not(.no-anim) {
    transition : opacity 0.2s ease;
}

.fade-enter-from:not(.no-anim),
.fade-leave-to:not(.no-anim) {
    opacity : 0;
}

/**
  FADE-LEFT
 */
.fade-left-enter-active:not(.no-anim),
.fade-left-leave-active:not(.no-anim) {
    transition : transform 0.2s ease-in-out;
    transform  : translate3d(0, 0, 0);
}

.fade-left-enter-to:not(.no-anim),
.fade-left-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : translate3d(0, 0, 0);
}

.fade-left-enter-from:not(.no-anim),
.fade-left-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : translate3d(-10%, 0, 0);
}

/**
  FADE-RIGHT
 */
.fade-right-enter-active:not(.no-anim),
.fade-right-leave-active:not(.no-anim) {
    transition : transform 0.2s ease-in-out;
    transform  : translate3d(0, 0, 0);
}

.fade-right-enter-to:not(.no-anim),
.fade-right-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : translate3d(0, 0, 0);
}

.fade-right-enter-from:not(.no-anim),
.fade-right-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : translate3d(10%, 0, 0);
}

/**
   FADE-SCALE
 */
.fade-scale-enter-active:not(.no-anim),
.fade-scale-leave-active:not(.no-anim) {
    transform-origin : top;
    transition       : all 0.2s ease-in-out;
}

.fade-scale-enter-to:not(.no-anim),
.fade-scale-leave-from:not(.no-anim) {
    opacity   : 1;
    transform : scaleY(1) !important;
}

.fade-scale-enter-from:not(.no-anim),
.fade-scale-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : scaleY(0) !important;
}

.fade-bottom-enter-from,
.fade-bottom-leave-to{
    opacity   : 0;
    transform : translateY(100%);
}

.fade-bottom-enter-active,
.fade-bottom-leave-active{
    transition : all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/**
   GRAYSCALE
 */
.grayscale-enter-active:not(.no-anim),
.grayscale-leave-active:not(.no-anim) {
    transition : all 1s ease-in;
}

.grayscale-enter-from:not(.no-anim),
.grayscale-leave-to:not(.no-anim) {
    filter  : grayscale(1);
    opacity : 0;
}

.grayscale-enter-to:not(.no-anim),
.grayscale-leave-from:not(.no-anim) {
    filter  : grayscale(0);
    opacity : 1;
}

/**
  SCALE
 */
.scale-enter-active:not(.no-anim),
.scale-leave-active:not(.no-anim) {
    transform-origin : top;
    transition       : transform 0.2s ease-in-out;
}

.scale-enter-to:not(.no-anim),
.scale-leave-from:not(.no-anim) {
    transform : scaleY(1);
}

.scale-enter-from:not(.no-anim),
.scale-leave-to:not(.no-anim) {
    opacity   : 0;
    transform : scaleY(0);
}

/**
  SCALE-UP
 */
.scaleUp-enter-active:not(.no-anim),
.scaleUp-leave-active:not(.no-anim) {
    overflow         : hidden;
    transition       : transform 0.1s ease, opacity 0.1s ease;
    transform-origin : bottom;
}

.scaleUp-enter-from:not(.no-anim),
.scaleUp-leave-to:not(.no-anim) {
    transform : scaleY(0);
    opacity   : 0;
}

/**
  SCALE-DOWN
 */
.scaleDown-enter-active:not(.no-anim),
.scaleDown-leave-active:not(.no-anim) {
    overflow         : hidden;
    transition       : transform 0.1s ease, opacity 0.1s ease;
    transform-origin : top;
}

.scaleDown-enter-from:not(.no-anim),
.scaleDown-leave-to:not(.no-anim) {
    transform : scaleY(0);
    opacity   : 0;
}

/**
  SLIDE-DOWN (need to set slideHeight in @enter event)
 */
.slideDown-enter-active,
.slideDown-leave-active {
    transition-duration        : 0.3s;
    transition-timing-function : ease-in-out;
    transition-property        : height, opacity;
}

.slideDown-enter-from, .slideDown-enter-to,
.slideDown-leave-from, .slideDown-leave-to {
    overflow-y : hidden;
}

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

.slideDown-enter-to,
.slideDown-leave-from {
    --slideHeight : 0;
    height        : calc(var(--slideHeight) * 1px);
    opacity       : 1;
}


@supports (height: calc-size(max-content, size)) {
    .slideDownModern-enter-from:not(.no-anim),
    .slideDownModern-leave-to:not(.no-anim) {
        overflow-y: hidden;
        height  : 0;
    }
    
    .slideDownModern-enter-active:not(.no-anim),
    .slideDownModern-leave-active:not(.no-anim) {
        overflow-y: hidden;
        transition-duration        : 0.3s;
        transition-timing-function : ease-in-out;
        transition-property        : height;
    }
    
    .slideDownModern-enter-to:not(.no-anim),
    .slideDownModern-leave-from:not(.no-anim) {
        height: calc-size(max-content, size);
    }
}

@supports not (height: calc-size(max-content, size)) {
    .slideDownModern-enter-from:not(.no-anim),
    .slideDownModern-leave-to:not(.no-anim) {
        opacity  : 0;
    }
    
    .slideDownModern-enter-active:not(.no-anim),
    .slideDownModern-leave-active:not(.no-anim) {
        transition-duration        : 0.2s;
        transition-timing-function : ease-in-out;
        transition-property        : opacity;
    }
    
    .slideDownModern-enter-to:not(.no-anim),
    .slideDownModern-leave-from:not(.no-anim) {
        opacity: 1;
    }
}


.accordion-enter-active,
.accordion-leave-active {
    transition-duration        : 0.3s !important;
    transition-timing-function : ease-in-out;
    transition-property        : grid-template-rows, opacity;
}

.accordion-enter-from,
.accordion-leave-to {
    grid-template-rows : 0fr;
    opacity            : 0;
}

.accordion-enter-to,
.accordion-leave-from {
    grid-template-rows : 1fr;
    opacity            : 1;
}

.fade-grow-enter-active {
    animation : fade-grow-in 0.3s;
}

.fade-grow-leave-active {
    animation : fade-grow-in 0.3s reverse;
}

.gm-contextmenu-enter-active,
.gm-contextmenu-leave-active {
    transition : opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.gm-contextmenu-enter-from,
.gm-contextmenu-leave-to {
    opacity   : 0;
    transform : scale(0.9);
}

.gm-contextmenu-enter-to {
    opacity   : 1;
    transform : scale(1);
}

.gm-contextmenu-leave-to {
    opacity   : 0;
    transform : scale(0.9);
}


@media (max-width : 580px) {
    .gm-contextmenu-enter-active, .gm-contextmenu-leave-active {
        transition : transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .gm-contextmenu-enter-from,
    .gm-contextmenu-leave-to {
        opacity   : 0;
        transform : translateY(100%) !important;
    }

    .gm-contextmenu-enter-to {
        opacity   : 1;
        transform : translateY(0) !important;

    }

    .gm-contextmenu-leave-to {
        opacity   : 0;
        transform : translateY(100%) !important;
    }
}

@keyframes fade-grow-in {
    0% {
        opacity   : 0;
        transform : scale(0);
    }
    100% {
        opacity   : 1;
        transform : scale(1);
    }
}


.bounce-enter-active {
    animation : bounce-in 0.3s;
}

.bounce-leave-active {
    animation : bounce-in 0.3s reverse;
}

@keyframes bounce-in {
    0% {
        opacity   : 0;
        transform : scale(0);
    }
    50% {
        opacity   : 0.5;
        transform : scale(1.25);
    }
    100% {
        opacity   : 1;
        transform : scale(1);
    }
}