.kit-modal-leave .kit-modal {
  animation: none;
  transform: translateY(-75%);
  opacity: 0;
}

._kit-modal-enter {
  border-radius: 5px;
}
.kit-modal {
  transition: var(--kit-transition);
  border-radius: var(--kit-modal-radius, 10px);
  background: var(--kit-background);
  padding: 0;
  min-width: var(--kit-modal-min-width, 40vw);
  width: 95%;
  max-width: 400px;
  animation: modal-in var(--kit-transition);
  border: none;
}

@keyframes modal-in {
  from {
    opacity: 0.1;
    transform: translateY(-75%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kit-modal-head {
  text-transform: uppercase;
}

.kit-modal-subtitle {
  color: var(--kit-shade-5);
}

.kit-modal-actions {
  border-bottom-right-radius: var(--kit-modal-radius, 10px);
  border-bottom-left-radius: var(--kit-modal-radius, 10px);
  display: flex;
  bottom: 0;
  width: 100%;
  position: sticky;
  overflow: hidden;
}

.kit-modal-action-button {
  text-transform: uppercase;
  flex: 1;
  border-top: 1px solid var(--kit-shade-2);
  padding: 1rem;
  transition: var(--kit-transition);
  color: var(--kit-shade-5);
}
.kit-modal-action-button:hover,
.kit-modal-action-button:focus {
  background-color: var(--kit-shade-2);
  color: var(--kit-foreground);
}
.kit-modal-action-button:not(:only-child):not(:last-child) {
  border-right: 1px solid var(--kit-shade-2);
}