rewrite DocsCollapsible

now with disabled js support and less broken animations

src/styles/components/accordion.css

@@ -0,0 +1,17 @@
+.accordion {
+  & summary {
+    list-style: none;
+  }
+
+  & .accordion-container {
+    /* fixes jumps due to margins on inline items */
+    display: flex;
+  }
+
+  & .accordion-container.animate {
+    /* this somehow breaks if both min AND max aren't animated */
+    transition: min-height 0.3s ease, max-height 0.3s ease;
+    min-height: var(--height);
+    max-height: var(--height);
+  }
+}

src/styles/css-config/animations.css

@@ -57,26 +57,6 @@
   }
 }
 
-@keyframes rotateIn90 {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(90deg);
-  }
-}
-
-@keyframes rotateOut90 {
-  from {
-    transform: rotate(90deg);
-  }
-
-  to {
-    transform: rotate(0deg);
-  }
-}
-
 @keyframes percentToFifty {
   from {
     --percent: 0%;

src/styles/docs/docs.css

@@ -142,3 +142,41 @@ ul {
     min-width: 33.8rem;
   }
 }
+
+.docs-collapsible {
+  background-color: hsl(var(--white) 40 50 / 0.1);
+  border-radius: 0.618rem;
+  overflow: hidden;
+
+  & summary {
+    padding: 1.2rem;
+    user-select: none;
+
+    & > div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.1em;
+      font-size: 1.117rem;
+      font-weight: 500;
+
+      & svg {
+        transition: transform 0.3s ease;
+        font-size: 1.1em;
+      }
+    }
+  }
+
+  & .accordion-container > div {
+    padding: 0 1.2rem;
+
+    & p:first-child {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+}
+
+.docs-collapsible[open]:not(.closing) > summary > div > svg {
+  transform: rotate(90deg);
+}