@keyframes opacityout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideout {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(var(--grapes-unit-16)) scale(0.97);
  }
}

.modalContainer {
  position: fixed;
  inset: 0;
  z-index: var(--grapes-z-index-modal);
  overflow: auto;
}

.modalOverlay {
  display: grid;
  place-items: center;
  min-height: 100%;
  background-color: var(--grapes-color-backdrop);
  opacity: 1;
  transition: opacity var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
}

.modal {
  box-shadow: var(--grapes-elevation-l);
  position: relative;
  background-color: var(--grapes-color-background-primary-default);
  margin: var(--grapes-unit-48) 0;
  border-radius: var(--grapes-border-radius-12);
  width: 600px;
  transform: translateY(0) scale(1);
  transition: transform var(--grapes-transition-duration)
    var(--grapes-transition-timing-function);
}

@starting-style {
  .modal {
    transform: translateY(var(--grapes-unit-16)) scale(0.97);
  }
  .modalOverlay {
    opacity: 0;
  }
}

.modalCloseButton {
  position: absolute;
  top: var(--grapes-unit-16);
  right: var(--grapes-unit-16);
  z-index: 1;
}

.modalHeaderWithIcon,
.modalIllustration {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--grapes-border-radius-12) var(--grapes-border-radius-12) 0
    0;
  overflow: hidden;
}

.modalIllustration > img {
  width: auto;
  height: 424px;
  margin: auto;
}
.modalHeaderWithIcon {
  padding: var(--grapes-unit-32) 0 0;
}

.modalTitle,
.modalIllustrationTitle {
  font: var(--grapes-heading-l);
  color: var(--grapes-color-content-primary);
  text-align: center;
  padding: var(--grapes-unit-24) var(--grapes-unit-32) 0;
  margin: 0;
}

.modalSubtitle,
.modalBody {
  font: var(--grapes-body-m);
  color: var(--grapes-color-content-secondary-bg-primary);
  padding: var(--grapes-unit-8) var(--grapes-unit-32) 0;
  margin: 0;
  text-align: center;
}

.modalBody {
  margin-bottom: var(--grapes-unit-8);
}

.modalActions {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--grapes-unit-8);
  margin: var(--grapes-unit-24) var(--grapes-unit-32) var(--grapes-unit-32);
}

.modalOverlay[data-closing='true'] {
  animation: var(--grapes-transition-duration) opacityout
    var(--grapes-transition-timing-function) forwards;
}

.modalOverlay[data-closing='true'] .modal {
  animation: var(--grapes-transition-duration) slideout
    var(--grapes-transition-timing-function) forwards;
}