2025-02-21

src/styles/components/imposter-box.css

@@ -0,0 +1,55 @@
+.dialog {
+  position: fixed; /* 1 */
+  z-index: 2; /* 1 */
+  inset: 0; /* 1 */
+  display: flex; /* 2 */
+  background: var(--bg25-secondary);
+  margin: 0;
+
+  &[aria-hidden="true"] {
+    display: none; /* 1 */
+  }
+}
+
+.dialog-content {
+  position: relative; /* 2 */
+  max-inline-size: 80ch;
+  margin: auto; /* 1 */
+  padding: initial;
+  border: 1px solid var(--color-primary);
+  background-color: var(--color-secondary);
+  box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
+  animation: fade-in 100ms 10ms both;
+
+  header {
+    overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    border-block-end: 1px solid var(--color-primary);
+
+    h2 {
+      padding-inline: var(--s-1);
+      font-size: var(--s1);
+    }
+
+    button {
+      padding: var(--s-1);
+      font-family: Banquise, monospace;
+      font-weight: 500;
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog-overlay, .dialog-content {
+    animation: none;
+  }
+}