/* Laadstatus op knoppen (zie knop-laden.js). Het rondje is een eigen element
   (<knop-rondje>), zodat regels als `.btn-go span` er niet op vallen. */
.knop-laden { cursor: progress !important; pointer-events: none; }
.knop-laden-rel { position: relative; }

/* Gewone knop: tekst even onzichtbaar, rondje in het midden; de knop houdt zijn maat. */
.knop-laden-midden { color: transparent !important; }
.knop-laden-midden > :not(knop-rondje) { opacity: 0; }

/* Menu-item of klikbare kaart: inhoud blijft staan, rondje rechts. */
.knop-laden-rechts { opacity: .85; }

knop-rondje {
    position: absolute; top: 50%; display: block; width: 1.1em; height: 1.1em; min-width: 0; min-height: 0;
    margin: -.55em 0 0; padding: 0; box-sizing: border-box; background: none;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: knop-draai .7s linear infinite; pointer-events: none;
}
.knop-laden-midden knop-rondje { left: 50%; margin-left: -.55em; }
.knop-laden-rechts knop-rondje { right: 14px; }

@keyframes knop-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { knop-rondje { animation-duration: 1.6s; } }