/* ==========================================================================
   Preview — the page embedded in the frame of the component's reference page.

   This page is not a site: it is a frame. That difference explains everything
   below. On a site, "narrow scene" means "little room", and the component is
   right to close up its margins. Here, narrow means "small frame" — closing up
   would amount to showing something other than the component. So the
   composition is frozen and the scale is set to the room available.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this, the inner padding of the body adds to its 100 % height: the
     component is taller than the frame and overflows at the bottom. */
  box-sizing: border-box;
}

body {
  background: #050507;
}

.compare-slider {
  /* The scale follows the width of the frame, with no ceiling, and that is
     the important part: since the whole component is expressed in multiples of
     this one variable, the layout is rigorously identical at every size. One
     single constant is then enough to frame it.

     88 puts the gap between the edge of the frame and the image at 4.96 % of
     the width — the reference is at 4.44 % — and lets the frame take all the
     room left without ever hitting its own ceiling of 81.8182 em. A
     min(1rem, …) would break that property.  */
  --cs-font-size: calc(100vw / 88);

  /* The scene fills the frame: it is the frame that gives the format. */
  --cs-block-size: 100%;

  /* The state shown. The reveal stops a little before the middle: at 50 % the
     drawing is symmetrical and nobody understands that it moves. */
  --cs-position: 44%;
}

/* --------------------------------------------------------------------------
   The breakpoint of the component, neutralised for the preview.

   The selector targets the frame, not the scene, because that is where the
   container query of the component sets its value — a declaration inherited
   from the scene would be no match for a value set directly on the element. At
   equal specificity, this file being loaded after compare-slider.css, it is
   the one that wins. That is wanted, and it is the only place where we allow
   ourselves to contradict the component.
   -------------------------------------------------------------------------- */

.compare-slider__frame {
  --cs-inset: calc(4.3637 * var(--cs-font-size));
}