.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  padding: var(--vertical-rhythm) 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  background-color: var(--backdrop-background-color);
  will-change: opacity, transform;
}

.modal-enter.modal-enter-active,
.modal-exit.modal-exit-active {
  transition: opacity 0.2s ease-in-out,
              transform 0.2s ease-in-out;
}

.modal-enter,
.modal-exit.modal-exit-active {
  opacity: 0;
  transform: scale(1.15);
}

.modal-enter.modal-enter-active,
.modal-exit {
  opacity: 1;
  transform: scale(1);
}

.modal-dialog {
  padding: var(--vertical-rhythm) 1.5rem;
  margin: 0 0 var(--vertical-rhythm);
  background-color: var(--x-light-color);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--shadow-color);
}

.modal-dialog > *:last-child {
  margin-bottom: 0;
}

.modal > .modal-dialog {
  flex: 1;
  margin: auto;
  max-width: 640px;
}

.modal-title {
  margin: 0;
  font-size: calc(1rem * $type-scale-2);
  font-weight: bold;
  line-height: calc(var(--vertical-rhythm) * $type-height-2);
}

.modal-is-opened {
  overflow: hidden;
  position: relative;
  height: 100%;
}
