/*
 * .lerret-zoom — delt pille-formet zoom-kontroll for canvas-baserte diagrammer.
 *
 * Brukes av prosess-editoren ([sider/prosesser.js](../../js/sider/prosesser.js))
 * og blokkdiagrammet ([komponenter/blokkdiagram.js](../../js/komponenter/blokkdiagram.js)).
 * Konsoliderte fra `.blokk-verktoy` + `.prosess-zoom--flyt` 2026-06-22
 * (OPPGAVER Spor 13).
 *
 * HTML-mønster:
 *   <div class="lerret-zoom lerret-zoom--<plassering>">
 *     <button class="ikonknapp" ...>−</button>
 *     <span class="lerret-zoom__niva">100%</span>
 *     <button class="ikonknapp" ...>+</button>
 *     <button class="ikonknapp" ...>⤢</button>
 *   </div>
 *
 * Posisjonering settes via modifier — diagrammene har ulikt foretrukket
 * hjørne. Selve pillen og knappene har samme look uansett.
 */

.lerret-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 6px;
  background: var(--farge-flytende, var(--flate-1, #fff));
  border: var(--kant);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.lerret-zoom .ikonknapp {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
}
.lerret-zoom .ikonknapp:hover {
  background: var(--farge-overflate-hover, var(--flate-2, var(--farge-bakgrunn)));
  color: var(--farge-primary);
}

.lerret-zoom__niva {
  font-size: 12px;
  color: var(--farge-tekst-dempet, var(--tekst-dempet, #64748b));
  min-width: 38px;
  text-align: center;
}

/* Plasseringer — diagrammet er en posisjonert container, kontrollen flyter oppå. */
.lerret-zoom--ovre-hoyre {
  position: absolute;
  top: var(--avstand-2);
  right: var(--avstand-2);
  z-index: 2;
}
.lerret-zoom--nedre-hoyre {
  position: absolute;
  right: var(--avstand-3);
  bottom: var(--avstand-3);
  z-index: 6;
}