/* The drawing viewer. Without JavaScript the SVG is scaled to fit the stage;
   the viewer controller lays a translate and a scale over that, and
   shows the −/+/FIT bar. The drawing is re-inked: its strokes and fills are
   currentColor, set by the viewer. */
@layer components {
  .viewer__stage {
    position: absolute;
    inset: 0;

    &:focus-visible {
      outline-offset: calc(var(--rule-width) * -4);
    }
  }

  .viewer__canvas {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;

    & svg {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .viewer--live .viewer__stage {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .viewer--dragging .viewer__stage {
    cursor: grabbing;
  }

  @media (prefers-reduced-motion: no-preference) {
    .viewer__canvas {
      transition: transform 120ms ease-out;
    }

    .viewer--dragging .viewer__canvas {
      transition: none;
    }
  }

  /* A bar floating over the drawing, bottom-left. */
  .viewer__controls {
    position: absolute;
    inset-block-end: calc(var(--block-space) * 1.25);
    inset-inline-start: calc(var(--inline-space) * 2.5);
    display: flex;
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-panel);
    color: var(--color-ink);
  }

  .viewer__button {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding-inline: calc(var(--inline-space) * 1.25);
    border: 0;
    background-color: transparent;
    color: inherit;
    font-size: var(--text-lg);
    cursor: pointer;

    &:hover {
      color: var(--color-accent-hover);
    }

    &:focus-visible {
      outline-offset: calc(var(--rule-width) * -3);
    }
  }

  .viewer__fit {
    border-inline-start: var(--rule-width) solid var(--color-hairline);
    font-size: var(--text-xs);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-bold);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
  }

  .viewer__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 7ch;
    border-inline: var(--rule-width) solid var(--color-hairline);
    color: var(--color-ink-dim);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
  }

  /* Read out to a screen reader, not shown. */
  .viewer__help {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}