1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* The live-example figure used throughout the docs — see the "How the
   example demos work" section on the Using the CSS page. One class on the
   outer <figure>; everything inside is styled by plain element selectors,
   since figcaption/div/details/summary/pre already say what they are.
   `data-layout` and `data-surface` on the preview <div> distinguish the
   handful of demos that need a non-default arrangement. */

.example {
  margin: var(--gl-space-s) 0 var(--gl-space-l);
  border: 1px solid var(--gl-color-border-default);
  border-radius: var(--gl-radius-lg);
  background: var(--gl-color-surface-card);
  overflow: hidden;
}

.example figcaption {
  padding: var(--gl-space-2xs) var(--gl-space-xs);
  border-bottom: 1px solid var(--gl-color-border-hairline);
  background: var(--gl-color-surface-fill);
  font-family: var(--gl-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gl-color-text-secondary);
}

.example > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-space-xs);
  padding: var(--gl-space-s);
}
/* nowrap is load-bearing: a column-direction flex container with wrap enabled
   sizes its single line against the container rather than the content, which
   left every stacked example with a few hundred pixels of dead space. */
.example > div[data-layout="stack"] { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.example > div[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  align-items: start;
}
.example > div[data-surface="sunken"] { background: var(--gl-color-surface-fill); }
.example > div > * { min-width: 0; }

.example details {
  border-top: 1px solid var(--gl-color-border-hairline);
  background: var(--gl-color-surface-fill);
}
.example summary {
  padding: var(--gl-space-2xs) var(--gl-space-xs);
  font-size: var(--gl-step--2);
  font-weight: 500;
  color: var(--gl-color-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--gl-space-2xs);
}
.example summary::-webkit-details-marker { display: none; }
.example summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: -45deg;
  transition: rotate var(--gl-dur-fast) var(--gl-ease);
}
.example details[open] > summary::before { rotate: 45deg; }
.example summary:hover { color: var(--gl-color-text-primary); }

.example pre {
  margin: 0;
  padding: var(--gl-space-xs);
  border-top: 1px solid var(--gl-color-border-hairline);
  overflow-x: auto;
  font-size: var(--gl-step--2);
  line-height: 1.5;
  tab-size: 2;
}
.example pre code { background: none; border: 0; padding: 0; white-space: pre; }

/* Standalone fenced code blocks in the prose (unhighlighted — there is no
   syntax highlighter in this build any more, just Kramdown's plain
   <pre><code class="language-*">). */
.gl-doc-main > pre {
  margin-block: var(--gl-space-xs);
  padding: var(--gl-space-xs);
  border: 1px solid var(--gl-color-border-default);
  border-radius: var(--gl-radius-md);
  background: var(--gl-color-surface-fill);
  overflow-x: auto;
  font-size: var(--gl-step--2);
  line-height: 1.5;
}
.gl-doc-main > pre code { background: none; border: 0; padding: 0; white-space: pre; }