.b2b-store-selector {
    view-transition-name: storeSelector;
}

.b2b-store-selector-backdrop {
    view-transition-name: storeSelectorBackdrop;
}

::view-transition-new(storeSelector):only-child {
    animation-name: animate-in;
    animation-duration: var(--ats-default-transition-duration);
    animation-timing-function: var(--ats-bounce-transition-timing-function);
    animation-fill-mode: both;
}

::view-transition-old(storeSelector):only-child {
    animation-name: animate-out;
    animation-duration: var(--ats-default-transition-duration);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

::view-transition-new(storeSelectorBackdrop):only-child,
::view-transition-old(storeSelectorBackdrop):only-child {
    animation-name: fade-in;
    animation-duration: var(--ats-default-transition-duration);
    animation-timing-function: linear;
    animation-fill-mode: both;
}

::view-transition-old(storeSelectorBackdrop):only-child {
    animation-name: fade-out;
    animation-duration: var(--ats-default-transition-duration);
}

@keyframes animate-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-1.5rem);
    }
}

@keyframes animate-out {
    0% {
        transform: translateX(-1.5rem);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}