:root {
    --transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
    --transition-ease-out: cubic-bezier(1, 0.33, 0.5, 0.1);
}

.transition,
.ease {
    transition: var(--bgl-transition);
}

.transition-400,
.ease-400 {
    transition: var(--bgl-transition-400);
}

.fade-enter-active {
    transition: all 0.2s ease-out;
}

.fade-leave-active {
    transition: all 0.2s ease-in;
}

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

.scale-enter-active {
    transition: all 0.2s var(--transition-ease-in);
}

.scale-leave-active {
    transition: all 0.2s var(--transition-ease-out);
}

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

.list-enter-active,
.list-leave-active {
    /*transition: all 0.5s ease;*/
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: scaleY(0) translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
    position: absolute;
}

body:has([class*="slide-fade"])::-webkit-scrollbar {
    width: 0em !important;
    height: 0em !important;
}

.slide-fade-enter-active {
    transition: all 0.15s ease-out;
    overflow: hidden;
}

.slide-fade-leave-active {
    transition: all 0.15s ease-in;
    overflow: hidden;
}

.slide-fade-enter-from {
    transform: translateX(20px);
    opacity: 0;
}

.slide-fade-leave-to {
    transform: translateX(-20px);
    opacity: 0;
}