agent foundation

web/css/components/app-confirm-dialog.css

@@ -0,0 +1,58 @@
+@layer components {
+  dialog[data-app-confirm-dialog] > article.app-confirm-dialog {
+    max-width: 32rem;
+  }
+
+  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 {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 10px;
+  }
+
+  dialog[data-app-confirm-dialog] footer button {
+    margin: 0;
+  }
+
+  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);
+  }
+
+  @media (max-width: 576px) {
+    dialog[data-app-confirm-dialog] footer {
+      flex-direction: column-reverse;
+      align-items: stretch;
+    }
+  }
+}