.modal {
  border: unset;
}

.modal__wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1em;
  margin: 0 2em 2em;
  max-width: 500px;
  text-align: center;
  min-width: 230px;
}

.modal__clear {
  display: flex;
  justify-content: flex-end;
}

.modal__icon {
  & svg {
    width: 64px;
    height: 64px;
  }
}

.modal__button {
  all: unset;
  outline-offset: 0;
  cursor: pointer;
}

.modal__button:focus,
.modal__button:focus-visible {
  outline: currentColor solid 1px;
}

.modal__header {
  text-align: center;
}

.modal__header h3 {
  font-size: 1.625em;
  font-weight: 500;
}

.modal__actions {
  display: flex;
  flex-flow: column;
  gap: 1em;
  align-items: center;
}

.modal__form {
  display: flex;
}

#modal-error {
  max-height: 500px;
}

#modal-error header.modal__header p {
  white-space: pre-wrap;
  margin-top: 0.75em;
}