/* Opt-in helper classes for Element UI layouts.
 *
 * Nothing here applies automatically. Earlier versions of this file carried
 * the container demo from Element UI's own documentation, which is written to
 * make empty placeholder boxes visible on that one page:
 *
 *   .el-aside { background-color: #D3DCE6; text-align: center; line-height: 200px }
 *   .el-main  { background-color: #E9EEF3; text-align: center; line-height: 160px }
 *   .el-container:nth-child(7) .el-aside { line-height: 320px }
 *
 * Loaded by default, that centred every app's content, forced a grey-blue
 * palette on it and gave every line of text a height of 160 to 320 pixels.
 * A showcase page measured 4524px tall instead of 1444px, with 70px of empty
 * space between consecutive lines of a verbatim output. The nth-child rules
 * depended on a component's position in the document, so the damage varied
 * with how the page happened to be assembled.
 *
 * Element UI's own stylesheet already lays these components out correctly.
 * Use bslib's theming (el_page(theme = )) for fonts and colours.
 */

/* Background fills from Element UI's grid examples. Apply them yourself:
 * el_col(span = 12, class = "bg-purple", "content") */
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

/* A minimum height, so an empty grid cell is still visible while laying out. */
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* A tinted strip behind a row. */
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}