/**
 * @file
 * The sidebar heights example.
 *
 * Outlines the two regions of every sidebar layout on the page, so that a
 * gap the grid opens is an empty box rather than white page. An outline rather
 * than a border, because a border has a width and would move the very boxes
 * whose positions are being looked at.
 *
 * Plain CSS, like the other example stylesheets: this ships from the module
 * and has to work under a theme that defines none of its variables.
 */

.sidebar-heights-example [data-component-id="mantra_starter:content_w_sidebar"] > .content {
  outline: 1px dashed #2563eb;
  outline-offset: 2px;
}

.sidebar-heights-example [data-component-id="mantra_starter:content_w_sidebar"] > .meta {
  outline: 1px dashed #16a34a;
  outline-offset: 2px;
}

/* Each section ends well clear of the next, so the section below a layout is
 * not mistaken for the start of the next example. */
.sidebar-heights-example > * + * {
  margin-block-start: 4rem;
}