/* PG Confirm — a dialog that asks one question */
/* ============================================ */
/*
  A confirmation built on .pg-modal (see pg_modal.css), for the moments where an
  action is about to throw something away - the shared "Unsaved changes" dialog and
  the confirm dialog every data-turbo-confirm is asked in. Anything else that has to
  stop and ask should wear this rather than grow a look of its own.

  Shaped as a statement rather than as a form: a heading, a line of consequence, and
  the two answers. No header bar and no close X - the dialog is small enough to read
  at a glance, and a title bar would give it the weight of a panel the reader is
  meant to work in.

    <dialog class="pg-modal pg-confirm">
      <div class="modal-content pg-confirm__content">
        <div class="pg-confirm__copy">
          <h2 class="pg-confirm__title">…</h2>
          <p class="pg-confirm__text">…</p>
        </div>
        <div class="pg-confirm__actions">…</div>
      </div>
    </dialog>
*/

dialog.pg-modal.pg-confirm {
  /* Sized to what it says, rather than to the space available: .pg-modal fills the
     width it's given, which for one question and two answers leaves a line of text
     stranded across a box the width of the screen. max-content asks for the width
     the copy and the buttons actually need; the cap brings a longer question back
     to a readable measure and wraps it, and on a narrow phone keeps a margin of
     page either side so the dialog still reads as sitting above it. */
  width: max-content;
  min-width: min(17rem, calc(100vw - 3rem));
  max-width: min(26rem, calc(100vw - 3rem));

  border-radius: 1rem;

  /* The raised surface the app uses for things that sit above the page, matching
     the calendar's detail sheet rather than the flat body background. */
  background-color: var(--bs-tertiary-bg);
}

.pg-confirm__content {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;

  padding: 1.5rem;
}

.pg-confirm__copy {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;

  /* Lets a long line wrap rather than widening the dialog */
  min-width: 0;
}

.pg-confirm__title {
  margin: 0;

  color: var(--bs-emphasis-color);

  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
}

.pg-confirm__text {
  margin: 0;

  color: var(--bs-secondary-color);

  font-size: 0.875rem;
  line-height: 1.45;
}

/* Answers at the end of the line the eye is already travelling, with the safe one
   first: the destructive answer should never be the one under the cursor by
   default. */
.pg-confirm__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 0.5rem;
  row-gap: 0.5rem;

  flex-wrap: wrap;
}

/* The destructive answer, filled rather than tinted.

   .pg-button--danger is built for a bar of several controls, where a tint is enough
   to mark one of them out and a row of solid fills would be noise. A confirm dialog
   is the opposite case: there is exactly one destructive answer, it is the whole
   point of the dialog, and the tint leaves it reading as a disabled button against
   this raised surface - --bs-danger-bg-subtle and --bs-tertiary-bg are close to one
   another in the dark theme. */
.pg-confirm__actions .pg-button--danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}

.pg-confirm__actions .pg-button--danger:hover,
.pg-confirm__actions .pg-button--danger:focus-visible {
  background-color: var(--bs-danger-text-emphasis);
  border-color: var(--bs-danger-text-emphasis);
  color: #fff;
}