/**
 * @file
 * Layout for the pages that show one widget after another.
 *
 * Shared by the selection widgets and the date widgets examples. Both are a
 * list of one control per heading, and both hold widgets that open a drop or
 * a calendar out of flow, so the space under each of them has to be asked for
 * rather than left to the control's own height.
 */

.widget-example__item {
  margin-block: 1.5rem 2.5rem;
  max-width: 48rem;
}

.widget-example__item > h4 {
  margin-block: 0 0.25rem;
}

/* The date example titles its items with the plugin id rather than a name,
 * because that is what a form display is configured with. */
.widget-example__id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9375em;
}

.widget-example__item > p {
  margin-block: 0 0.75rem;
  max-width: 34rem;
  color: var(--color-text-muted, inherit);
}

/* A datelist is five selects on one row and a date range is ten. Left alone
 * they push the page sideways, which hides whatever else is being looked at;
 * scrolling the widget instead keeps the fault inside its own box. */
.widget-example__item .container-inline,
.widget-example__item .form-wrapper > .fieldset-wrapper {
  overflow-x: auto;
}

/* The last widget on the page still needs somewhere for its drop to open. */
.widget-example {
  padding-block-end: 20rem;
}