pkg-components/stories/molecules/AsideInfoStore/AsideInfoStore.module.css

.aside_content {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: translate3dHidden;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(212, 215, 220);
    border-image: initial;
    border-left: 1px solid rgb(212, 215, 220);
    border-right: 1px solid rgb(212, 215, 220);
    border-top: none;
    bottom: 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
    height: calc(-80px + 100vh);
    overflow-y: auto;
    position: fixed;
    right: 0px;
    transform: translateY(0px);
    transition: all 350ms cubic-bezier(0.32, 1.25, 0.32, 1) 0s;
    width: 472px;
    z-index: var(--z-index-high);
}

.aside_content__show {
    animation-name: show;
}

.aside_content__close {
    width: var(--font-size-2xl);
    height: var(--font-size-2xl);
}

.aside_content__close_button {
    background-color: var(--color-base-transparent);
}

@media (max-width: 960px) {
    .aside_content {
        width: 100%;
    }
}
@keyframes translate3dHidden {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    100% {
        transform: translate3d(120%, 0px, 0px);
    }
}
@keyframes show {
    0% {
        transform: translate3d(120%, 0px, 0px);
    }

    80% {
        transform: translate3d(-5px, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}