2025-02-22

src/styles/base/elements.css

@@ -43,6 +43,47 @@
   list-style: none;
 }
 
+:where(input[type="text"], input[type="number"]) {
+  padding: var(--s-4);
+}
+
+:where(input[type="radio"]) {
+  aspect-ratio: 1/1;
+  border: 1px solid var(--color-primary);
+  background: var(--color-secondary);
+  border-radius: 50%;
+  inline-size: var(--s-1);
+  block-size: var(--s-1);
+  position: relative;
+
+  &::after {
+    background: var(--color-primary);
+    border-radius: inherit;
+    content: "";
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    inline-size: var(--s-2);
+    block-size: var(--s-2);
+  }
+
+  + label {
+    padding-left: var(--s-2);
+  }
+}
+
+:where(input[type="radio"]:checked) {
+  &::after {
+    opacity: 1;
+  }
+}
+
+:where(fieldset > legend) {
+  margin-block-end: var(--s0);
+}
+
 :where(a) {
   text-decoration: none;
 }

src/styles/components/imposter-box.css

@@ -13,13 +13,13 @@
 
 .dialog-content {
   position: relative; /* 2 */
+  min-inline-size: 40ch;
   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;
@@ -41,15 +41,3 @@
     }
   }
 }
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-overlay, .dialog-content {
-    animation: none;
-  }
-}