@layer components {
  /* Confirm dialog — modal overlay for destructive action confirmation with danger/warning variants. */
  dialog[data-app-confirm-dialog] > article.app-confirm-dialog > header {
    position: relative;
    padding-inline-end: 2rem;
  }

  dialog[data-app-confirm-dialog] > article.app-confirm-dialog > header h2 {
    margin: 0;
  }

  dialog[data-app-confirm-dialog] [data-app-confirm-close].close {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: 1rem;
    float: none;
    margin: 0;
  }

  dialog[data-app-confirm-dialog] [data-app-confirm-message] {
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
  }

  dialog[data-app-confirm-dialog] [data-app-confirm-note] {
    margin-top: 0;
    margin-bottom: 0;
  }

  dialog[data-app-confirm-dialog] footer {
    padding: 10px;
  }

  dialog[data-app-confirm-dialog][data-confirm-variant="danger"] > article {
    border-top: 3px solid var(--app-del-color, #b42318);
  }

  dialog[data-app-confirm-dialog][data-confirm-variant="warning"] > article {
    border-top: 3px solid var(--app-warning-color, #b54708);
  }
}