.overlay {
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100dvw;
  z-index: var(--default-modal-overlay-z-index);

  &[data-entering] {
    animation: overlay-fade 200ms;
  }

  &[data-exiting] {
    animation: overlay-fade 150ms reverse ease-in;
  }
}

@keyframes overlay-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal {
  background: var(--UI-Input-Controls-Surface-Normal);
  border-top-left-radius: var(--Corner-radius-lg);
  border-top-right-radius: var(--Corner-radius-lg);
  max-height: 95dvh;
  overflow-y: auto;
  padding: var(--Space-x3);
  position: absolute;
  z-index: var(--default-modal-z-index);

  &[data-entering] {
    animation: modal-anim 200ms;
  }

  &[data-exiting] {
    animation: modal-anim 150ms reverse ease-in;
  }
}

@keyframes modal-anim {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@media screen and (max-width: 767px) {
  .modal {
    bottom: 0;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .overlay {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .modal {
    border-radius: var(--Corner-radius-lg);
    display: flex;
    min-height: 300px;
    min-width: 690px;
  }
}