/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   A background, two buttons, nothing else: the framing is what advertises the
   component. Two, because one alone would lie — at rest the button is a black
   pill, lit up it is a block of pixels, and the contrast between the two is the
   subject.
   ========================================================================== */

/* Without this the body's padding adds to the 100% height and the content
   drifts towards the bottom of the frame. */
html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

/* The scale follows the width of the frame, with no cap: the layout is then
   the same at every size, so a single constant is enough to centre it. A
   `min(…)` would break that property.

   It is set here rather than on the buttons: the gap between the two then
   follows it in `em`, and there is still only one constant to tune.
   22 = 14.125 em wide / 0.64 of the usable width. */
body {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4em;
  height: 100%;
  padding: 4vmin;
  font-size: calc((100vw - 8vmin) / 22);
  background: #000000;
}

.pixel-button {
  --pxb-font-size: 1em;

  /* The glow is `position: absolute`: it weighs nothing in the centring and
     spills 0.5 em over each side. Its space is given back to it, otherwise the
     frame clips it top and bottom and the two glows overlap. */
  margin: 0.5em;

  /* The grid keeps its pitch in pixels: at this scale it would run to several
     thousand squares and turn into a dotted screen. The poster has to show the
     texture people recognise, so the pitch is switched back to em — the two
     tokens exist for exactly that. */
  --pxb-grid-gap: 0.3125em;
  --pxb-grid-size: 0.15625em;
}

/* The second button shows the complete state: the grid that `always` lights
   up, plus the glow and the widened beam, which only respond to hover. So their
   tokens are set here, without touching the component — this is a poster, it is
   allowed to show a state nobody is hovering. */
.apercu-allume {
  --pxb-beam-stop: 20%;
  --pxb-glow-opacity: 1;
  --pxb-filter: brightness(1.15) contrast(1.05);
}