/**
 * @file
 * The box around a highlighted block, and what has to be taken off it.
 *
 * The colors are the theme stylesheet's job and the gutter and copy button are
 * the web component's, both of which arrive with the library. What is left is
 * the frame, the scrolling a long line needs -- and undoing the front-end
 * theme's inline-code styling, which is what most of this file is about.
 *
 * Note what is deliberately *not* here: a `display` for `micro-lighter`. The
 * component lays its gutter out beside the code with `:host { display: grid }`,
 * and a rule in this file would win -- styles from the outer document beat
 * `:host`, which is the one place in CSS where the more specific-looking
 * selector loses. Setting `display: block` on the element here is enough to
 * collapse the gutter into the code and leave the line numbers invisible.
 */

.microlighter,
micro-lighter {
  overflow: hidden;
  margin-block: 1em;
  /* A hairline in the palette's own muted color, so the block has an edge on
   * every theme. Two of the light palettes are pure white, and a white block
   * on a white page is a block you cannot see. */
  border: 1px solid color-mix(in srgb, var(--syntax-comment, #6b7280) 30%, transparent);
  border-radius: 0.25rem;
}

/* The theme stylesheet colors `pre:has(code)` and nothing else, so the padding
 * and the overflow are left to whoever wraps the block. The line height is
 * fixed rather than inherited because the gutter is drawn against the computed
 * line height of the `pre`, and `normal` does not give that in a usable form. */
.microlighter pre,
micro-lighter pre {
  overflow-x: auto;
  margin: 0;
  padding: 1em;
  tab-size: 2;
  line-height: 1.5;
}

/**
 * Takes the theme's inline-code chrome back off.
 *
 * A front-end theme styles `code` for the `<code>` in a sentence -- a tinted
 * pill with its own padding, radius and font size -- and that styling does not
 * know it is inside a `<pre>`. Left on, it paints a flat slab over the palette
 * background the theme stylesheet just put on the `pre`: the block reads as
 * gray on gray, and on a dark palette the two disagree outright. Its line
 * height also wins over the one above, which is the measure the line number
 * gutter is aligned to.
 *
 * `mantra_starter` is the worked example -- `code { background-color:
 * var(--colors-neutral-100) }`, and `pre code { font-size: var(--text-sm) }` --
 * but every theme with a prose style does some version of this.
 *
 * The selector is a class, an element and a child combinator so that it beats
 * a theme's `pre code` on specificity rather than on order: module CSS is
 * served before the active theme's.
 */
.microlighter pre > code,
micro-lighter pre > code {
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
}