/**
 * @file
 * The item list example.
 *
 * Every demo on that page is a real `.item-list`, which is the thing being
 * demonstrated, so nothing here may reach inside one except where the page is
 * deliberately showing what a declaration does by taking it away again. Those
 * three rules are at the foot of this file, each named for the section that
 * uses it, and each wins on specificity rather than on order: the theme
 * selects `.item-list` at (0,1,0) and these select it under a modifier class
 * at (0,2,0), so it does not matter that component CSS from a module is
 * aggregated before the theme's.
 *
 * What is left is the scaffolding around a demo -- the frame, the column of
 * markup beside it, the rules under it -- and all of it is addressed by a
 * class of its own.
 *
 * Plain CSS with fallbacks, like library-pages.css and typography-example.css:
 * this ships from the module and has to be readable in a theme that defines
 * none of these variables.
 */

/*
 * One demo: what the render array produced, beside the markup it produced.
 *
 * One column until there is room for two. `minmax(0, 1fr)` on both tracks
 * because the markup column holds a `pre` -- a grid item's automatic minimum
 * size is its content, and without it a long line of markup refuses to shrink
 * and pushes the live column off the page.
 */
.item-list-demo {
  display: grid;
  gap: 1rem 1.5rem;
  margin-block-end: 2rem;
}

@media (min-width: 60rem) {
  .item-list-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/*
 * The caption of a demo.
 *
 * Spans both columns, because it names the pair rather than either half. It is
 * a `div` rather than a heading: the sections of this page are already h3, and
 * the item lists inside a demo emit an h3 of their own for their title. A
 * fourth level of heading between those two would be read as a parent of the
 * list label, which it is not.
 */
.item-list-demo__caption {
  font-style: italic;
}

@media (min-width: 60rem) {
  .item-list-demo__caption {
    grid-column: 1 / -1;
  }
}

/*
 * The frame the live item list sits in.
 *
 * Deliberately not a grid, a flex container or anything else that would
 * blockify what is in it: `display: grid` on the wrapper is one of the four
 * declarations this page is about, and a frame that established a formatting
 * context of its own would be doing half of it before the theme got there.
 */
.item-list-demo__live {
  min-width: 0;
  padding: 1rem 1.25rem;
  border: var(--border-width, 1px) solid var(--color-border, currentColor);
  border-radius: var(--border-radius, 4px);
  background-color: var(--background-color, #fff);
}

/*
 * The markup the demo above it produced.
 *
 * Rendered in isolation from the same render array, in whatever theme is
 * serving the page, so it is the output and not a transcription of it. `pre`
 * keeps the indentation; `overflow-x: auto` keeps a long attribute list from
 * widening the page rather than the block.
 */
.item-list-demo__markup {
  min-width: 0;
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: var(--border-width, 1px) solid var(--color-border, currentColor);
  border-radius: var(--border-radius, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
}

/* An item list that emits nothing at all still needs a box to be nothing in. */
.item-list-demo__markup:empty::before {
  content: "(no output)";
  font-style: italic;
}

/*
 * The rules that apply to the demo above, quoted from the built stylesheet.
 *
 * `overflow-wrap: anywhere` because a declaration list is one long unbroken
 * token run that would otherwise widen the column past its track.
 */
.item-list-rules {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .item-list-rules {
    grid-column: 1 / -1;
  }
}

.item-list-rules dt {
  margin-block-start: 0.75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.item-list-rules dt:first-child {
  margin-block-start: 0;
}

.item-list-rules dd {
  margin-inline-start: 0;
  color: var(--color-text-light, #595959);
  overflow-wrap: anywhere;
}

/*
 * The multi-column container, for the `break-inside` section.
 *
 * A column *count* rather than the `columns: 18rem` width that
 * `#styleguide-header.styleguide` uses in libraries/modules/styleguide.css --
 * the page the declaration was added for. A width would size the columns
 * against the viewport and overflow this frame, which is half of a demo and
 * narrower than the page the style guide runs on; a count divides whatever
 * width the frame has and stays inside it. What is being shown is the break,
 * and a break is a break at either measure.
 *
 * The height is fixed and the fill is explicit so the demo has to break: left
 * to balance itself the content fits two short columns and there is nothing to
 * see. `column-fill: auto` fills the first column to the height and puts the
 * rest in the second, which is where a list gets split.
 *
 * The height is the one number here that had to be measured rather than
 * chosen, and it has to sit inside a window with an edge at each end. Below
 * the first list plus the heading of the second, the whole-list demo has to
 * break too and the pair shows nothing. Above roughly half the stacked pair,
 * neither has to break and the pair shows nothing again. And whatever the
 * first column cannot take has to fit in the second, because a multi-column
 * box does not scroll: it opens a third column outside itself, which reads as
 * the demo being broken rather than as the declaration doing something.
 *
 * At the theme's own heading size that window is about 20rem to 25rem wide,
 * and the value below is in the middle of it with the nearest item boundary
 * half a line away on either side. A theme with a much larger heading would
 * need it re-measured -- there is no value that is correct for all of them,
 * because the point of the demo is a break at a particular place.
 */
.item-list-demo__columns {
  columns: 2;
  column-fill: auto;
  block-size: 21.5rem;
}

/* --------------------------------------------------------------------------
 * The three rules that take a declaration away again.
 *
 * Each belongs to one section of the page, where the same list is rendered
 * twice and the pair is the point. Nothing else in this file selects
 * `.item-list`.
 * -------------------------------------------------------------------------- */

/* "The wrapper is a grid": the same list without it. */
.item-list-demo__live--block .item-list {
  display: block;
}

/* "The comma list is not inline": the wrapper stepped out of the way, so the
 * list is no longer a grid item and its own `display: inline` is honoured. */
.item-list-demo__live--inline .item-list {
  display: inline;
}

/* "A list is not broken across columns": the same list allowed to break. */
.item-list-demo__columns--split .item-list {
  break-inside: auto;
}