@keyframes popInFrames_GLeBw {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popOutFrames_v04La {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes scaleIn_5wbr8 {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideInRightFrames_Tx4I5 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideOutRightFrames_g7LeU {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes slideAndScaleToAppear_i-PpI {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideEnter_apFS2 {
    from {
        transform: var(--transform);
    }
}
@keyframes slideExit_O0mEI {
    to {
        transform: var(--transform);
    }
}
@keyframes fadeEnter_TtNM- {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeExit_eqY1G {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.popIn_HUvB6 {
    animation-name: popInFrames_GLeBw;
    animation-duration: var(--duration-short);
}
.popOut_Ygc-T {
    animation-name: popOutFrames_v04La;
    animation-duration: var(--duration-short);
}

.scaleInBackground_bbVxj {
    animation-name: scaleIn_5wbr8;
    animation-duration: var(--duration-extended);
    transform-origin: center;
}

.fadeIn_oHVvu {
    animation-name: fadeEnter_TtNM-;
    animation-duration: var(--duration-xshort);
}
.fadeOut_n3Euj {
    animation-name: fadeExit_eqY1G;
    animation-duration: var(--duration-xshort);
}

.slideAndScale_vtP0W {
    animation-name: slideAndScaleToAppear_i-PpI;
    animation-duration: var(--duration-long);
}

.slideInRight_Uiof3 {
    animation-name: slideInRightFrames_Tx4I5;
    animation-duration: var(--duration-short);
}

.slideOutRight_fkXO8 {
    animation-name: slideOutRightFrames_g7LeU;
    animation-duration: var(--duration-short);
}

/*
* Composable animations using css variables
*/

.fade_t11VD {
    animation-delay: var(--delay, 0);
    animation-duration: var(--duration);
    animation-fill-mode: both;
}
.fade_t11VD.enter_CJ4NW {
    animation-name: fadeEnter_TtNM-;
}
.fade_t11VD.exit_pL54W {
    animation-name: fadeExit_eqY1G;
}

.slide_NPfw9 {
    animation-delay: var(--delay, 0);
    animation-duration: var(--duration);
    animation-fill-mode: both;
}
.slide_NPfw9.enter_CJ4NW {
    animation-name: slideEnter_apFS2;
}
.slide_NPfw9.exit_pL54W {
    animation-name: slideExit_O0mEI;
}

.fade_t11VD.slide_NPfw9 {
    animation-delay: var(--delay, 0), var(--delay, 0);
    animation-duration: var(--duration), var(--duration);
    animation-fill-mode: both, both;
}
.fade_t11VD.slide_NPfw9.enter_CJ4NW {
    animation-name: slideEnter_apFS2, fadeEnter_TtNM-;
}
.fade_t11VD.slide_NPfw9.exit_pL54W {
    animation-name: slideExit_O0mEI, fadeExit_eqY1G;
}

.enter_CJ4NW {
    --duration: var(--duration-short);
}
.exit_pL54W {
    --duration: var(--duration-xshort);
}

.distance-s_mIzSK {
    --distance: 5px;
}
.distance-m_6j9sJ {
    --distance: 10%;
}
.distance-l_X1tkU {
    --distance: 100%;
}

.left_Hu7GS,
.top_NZtOQ {
    --direction: -1;
}
.right_E4G3t,
.bottom_3FdkX {
    --direction: 1;
}
.left_Hu7GS,
.right_E4G3t {
    --transform-origin: translateX(0);
    --transform: translateX(calc(var(--direction) * var(--distance)));
}
.bottom_3FdkX,
.top_NZtOQ {
    --transform-origin: translateY(0);
    --transform: translateY(calc(var(--direction) * var(--distance)));
}

.delay-xs_2KPQY {
    --delay: 100ms;
}
.delay-s_PScf8 {
    --delay: 150ms;
}
.delay-m_GzTIs {
    --delay: 200ms;
}
.delay-l_9HxsJ {
    --delay: 250ms;
}
.delay-xl_wIGLd {
    --delay: 350ms;
}

.duration-xs_sva6i {
    --duration: var(--duration-xshort);
}
.duration-s_2wWH8 {
    --duration: var(--duration-short);
}
.duration-m_2OJD2 {
    --duration: var(--duration-medium);
}
.duration-l_SmBMD {
    --duration: var(--duration-long);
}
.duration-ext_AXltA {
    --duration: var(--duration-extended);
}