@ozen-ui/kit/__inner__/esm/components/Modal/Modal.css

React component library

.Modal {
  inset: 0;
  position: fixed;
  z-index: var(--z-index-modal);
}

  .Modal:not(.Modal_hasBackdrop) {
    pointer-events: none;
  }

  .Modal:not(.Modal_hasBackdrop) .Modal-Window {
      pointer-events: auto;
    }

  .Modal-Window {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 400px;
    box-sizing: border-box;
    border: 2px solid black;
    padding: var(--spacing-l);
  }

  .Modal_hidden {
    visibility: hidden;
  }

.Modal_animation-enter .Modal-Window, .Modal_animation-appear .Modal-Window {
      opacity: 0;
      transform: translate(-50%, -50%) translateY(100px);
    }

.Modal_animation-enter-active .Modal-Window, .Modal_animation-appear-active .Modal-Window {
      opacity: 1;
      transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
      transform: translate(-50%, -50%) translateY(0);
    }

.Modal_animation-enter-done .Modal-Window {
      opacity: 1;
      transform: translate(-50%, -50%) translateY(0);
    }

.Modal_animation-exit .Modal-Window {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) translateY(0);
    }

.Modal_animation-exit-active .Modal-Window {
      opacity: 0;
      visibility: visible;
      transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
      transform: translate(-50%, -50%) translateY(100px);
    }

.Modal_animation-exit-done .Modal-Window {
      opacity: 0;
      transform: translate(-50%, -50%) translateY(100px);
      visibility: hidden;
    }