/* The in-page confirmation that replaces window.confirm() for
   data-turbo-confirm. The browser centers a modal <dialog> on its own. The
   rules here size the box and style the backdrop, the message and the two
   buttons. The content box carries the padding, so a click on the dialog
   element itself is a click on the backdrop. */
.confirm-dialog {
  background-color: var(--white);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
  color: var(--dark-gray);
  max-width: 28rem;
  padding: 0;
  width: calc(100% - 2rem);
}

.confirm-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.confirm-dialog-content {
  padding: 1.5rem;
}

.confirm-dialog-message {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.confirm-dialog-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Cancel looks like a normal link (the page's a, a:hover rules), so the red
   Confirm is the one solid button. */
.confirm-dialog-cancel {
  background: none;
  border: none;
  color: var(--dark-blue);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.5rem 1rem;
  text-decoration: underline;
}

.confirm-dialog-cancel:hover,
.confirm-dialog-cancel:active {
  color: var(--light-blue);
}