/**
 * <Modal> — centred modal with scrim.
 *
 * Markup:
 *   <div class="c-modal" id="modal-delete" role="dialog" aria-modal="true"
 *        aria-labelledby="modal-delete-title" hidden>
 *     <div class="c-modal__scrim" data-c-modal-close></div>
 *     <div class="c-modal__panel" role="document">
 *       <h2 class="c-modal__title" id="modal-delete-title">Delete credential</h2>
 *       <div class="c-modal__body">…</div>
 *       <footer class="c-modal__footer">
 *         <button type="button" class="c-btn c-btn--secondary" data-c-modal-close>Cancel</button>
 *         <button type="button" class="c-btn c-btn--danger">Delete</button>
 *       </footer>
 *     </div>
 *   </div>
 *
 * Open with `openModal(el, { triggerEl })`; close with `closeModal(el)`. The
 * scrim element and any `[data-c-modal-close]` descendant close the modal.
 */

.c-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.c-modal[hidden] {
  display: none;
}

.c-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.c-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 2 * var(--space-5));
  overflow: auto;
  padding: var(--space-7);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.c-modal__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--text-primary);
}

.c-modal__body {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}

.c-modal__body > * + * {
  margin-top: var(--space-3);
}

.c-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}