toggle-corp/react-store

:root {
    --width-modal-small: 420px;
}

.modal {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: column;
    transform: translate(-50%, -50%);
    box-shadow: 0 var(--spacing-small) var(--spacing-extra-large) var(--color-shadow-medium);
    background-color: var(--color-foreground);
    width: var(--width-modal-medium);
    max-height: 96vh;
}

@keyframes fade-in-from-top {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}