/* ---------------------------------------------------------------
   Klikbare markører oven på et skærmbillede.
   Bruges sammen med Material for MkDocs' annotations-feature:

   <div class="kb-annotate-image annotate">
     <img src="billede.png" class="off-glb">
     <span class="kb-marker" style="--kb-x:20%;top:10%">(1)</span>
   </div>

   1. Forklaring til markør 1

   Markøren er en fuldbredde-stribe, ikke en lille prik. Det er med vilje:
   Material placerer sin popup som "position:absolute" inde i markøren, og
   popuppens bredde beregnes ud fra markørens bredde. En smal markør ville
   presse popup-teksten sammen til én ordbredde.
   --------------------------------------------------------------- */

.kb-annotate-image {
  position: relative;
  display: block;
  max-width: 100%;
}

.kb-annotate-image > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Striben spænder over hele billedet og placeres lodret med "top" i procent.
   Selve markøren skubbes vandret på plads med padding i procent, så begge
   koordinater følger billedet uanset skærmbredde. */
.kb-annotate-image .kb-marker {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--kb-x) - 1.5ch);
  transform: translateY(-50%);
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
  /* Striberne overlapper hinanden. Uden dette ville den nederste stribe
     opfange museklik på markører der ligger i samme højde. */
  pointer-events: none;
}

.kb-annotate-image .kb-marker > * {
  pointer-events: auto;
}