/* Confirmation modal: a native <dialog>, only for blocking decisions. */
@layer components {
  .dialog {
    margin: auto; /* the reset zeroes the UA margin that centres a modal dialog */
    max-inline-size: min(28rem, calc(100vw - 2rem));
    padding: var(--block-space-double) calc(var(--inline-space) * 3);
    color: var(--color-text);
    background: var(--color-bg-raised);
    border: 0;
    border-radius: var(--radius-x-large);
    box-shadow: var(--shadow-large);

    &::backdrop { background: oklch(var(--lch-text) / 0.4); }
  }

  .dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--inline-space);
    margin-block-start: var(--block-space);
  }
}