Pre-PMTools

src/styles/components/blocks/terms.css

@@ -26,12 +26,12 @@
   }
 
   .term__body {
+    @mixin typo_body;
     @mixin ma var(--size-0);
   }
 
-  .term__definition {
-    @mixin typo_body;
-    @mixin ma var(--size-0);
+  :where(.term__body p) {
+    @mixin my var(--size-0);
   }
 
   .term__see {
@@ -100,4 +100,53 @@
 
     background-color: var(--color-surface-elevated-1);
   }
+
+  .terms--compact {
+    @mixin my var(--space-9);
+    @mixin border-t var(--border-hairline), solid, var(--color-border-strong);
+
+    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
+    column-gap: var(--size-9);
+  }
+
+  .terms--compact .term,
+  .terms--compact .term__body {
+    @mixin py var(--size-5);
+    @mixin border-b var(--border-hairline), solid, var(--color-border-subtle);
+  }
+
+  .terms--compact .term {
+    gap: var(--size-2);
+    justify-content: start;
+  }
+
+  .terms--compact .term__name {
+    @mixin typo_heading-5;
+  }
+
+  .terms--compact .term__body {
+    @mixin typo_definition-data;
+  }
+
+  .terms--compact .term__see {
+    @mixin mt var(--size-3);
+
+    padding-block-start: var(--size-0);
+    border-block-start: none;
+  }
+
+  .terms--compact .term:target .term__name {
+    color: var(--color-primary);
+  }
+
+  @media (--bp-tablet-down) {
+    .terms--compact {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .terms--compact .term {
+      padding-block-end: var(--size-0);
+      border-block-end: none;
+    }
+  }
 }