@memori.ai/memori-react/src/components/ui/Modal.css

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

.memori-modal {
    position: relative;
    z-index: 1000;
}

.memori-modal--backdrop {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.memori-modal--container {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}

.memori-modal--container-scrollable {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}

.memori-modal--panel {
    position: relative;
    max-width: var(--memori-modal--width, 100%);
    padding: 1.5rem;
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    font-family: var(--memori-font-family);
}

@media (min-width: 768px) {
    .memori-modal--panel {
        max-width: var(--memori-modal--width-md, 80%);
        padding: 2rem 3rem;
    }
}

.memori-modal--footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.memori-modal--footer button+button {
    margin-left: 0.5em;
}

.memori-modal--close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem;
}

.ease-out {
    transition-timing-function: ease-out;
}

.ease-in {
    transition-timing-function: ease-in;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}