/* The frame around one showcase example. Every value is a library token,
   so the theme bar re-themes the frame together with the component. */
html {
  background: var(--sn-color-bg);
}

body.showcase-preview {
  margin: 0;
  padding: var(--sn-space-6);
  background: var(--sn-color-bg);
  color: var(--sn-color-text);
  font-family: var(--sn-font-sans);
}

.showcase-stage {
  display: grid;
  gap: var(--sn-space-4);
  max-inline-size: 40rem;
}

/* An overlay opens inside its frame, which cannot paint beyond its box: a
   preview with one reserves room for it, so opening it rarely moves the
   page. The frame still grows when an overlay reaches past this. */
.showcase-stage:has(sn-combobox) {
  min-block-size: 25rem;
}

.showcase-example {
  display: grid;
  gap: var(--sn-space-4);
}

.showcase-echo,
.showcase-result {
  margin: 0;
  color: var(--sn-color-text-muted);
  font-size: var(--sn-font-size-sm);
}

.showcase-echo output {
  color: var(--sn-color-text);
  font-family: var(--sn-font-mono);
}

/* A server's answer to a query: bordered rows that scroll after about
   seven, so a long answer does not stretch the frame. */
.showcase-results {
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 18rem;
  overflow-y: auto;
  border: var(--sn-state-border-width) solid var(--sn-color-border);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-surface);
}

.showcase-results:empty {
  display: none;
}

.showcase-results li {
  padding: var(--sn-space-2) var(--sn-space-3);
  color: var(--sn-color-text);
}

.showcase-results li + li {
  border-block-start: var(--sn-state-border-width) solid var(--sn-color-border);
}

.showcase-states {
  display: grid;
  gap: var(--sn-space-6);
}

.showcase-state {
  margin: 0;
  display: grid;
  gap: var(--sn-space-2);
}

.showcase-state figcaption {
  color: var(--sn-color-text-muted);
  font-size: var(--sn-font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.showcase-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
}