.no-scroll {
  overflow: hidden;
}

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

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

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

.Modal-Window {
    position: relative;
    margin: auto;
    inline-size: 400px;
    max-inline-size: calc(100% - 64px);
    background-color: var(--color-background-surface-highest-medium);
    box-sizing: border-box;
    border: 2px solid var(--color-border-base-main);
    padding: var(--spacing-8x);
  }

.Modal_hidden {
    visibility: hidden;
  }

.Modal_animation-enter .Modal-Window {
      opacity: 0;
      transform: translateY(100px);
    }

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

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

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

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

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