/* Loading button helpers (opt-in via .js-loading-btn). */
/* Comments are in English by project convention. */

.js-loading-btn {
  position: relative;
}

.js-loading-btn .btn-label {
  display: inline-block;
  opacity: 1;
  transition: opacity 120ms ease-out;
}

.js-loading-btn .btn-loader {
  display: none;
}

.js-loading-btn.is-loading {
  pointer-events: none;
}

.js-loading-btn.is-loading .btn-label {
  opacity: 0;
}

.js-loading-btn.is-loading .btn-loader {
  display: inline-flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Spinner (requested design). */
.loader {
  /* Defaults */
  --vlb-spinner-size: 32px;
  --vlb-spinner-border: 4px;
  --vlb-spinner-color: #FFF;

  width: var(--vlb-spinner-size);
  height: var(--vlb-spinner-size);
  border: var(--vlb-spinner-border) solid var(--vlb-spinner-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

/* Dark spinner variant for light/white buttons. */
.js-loading-btn--spinner-dark .loader {
  --vlb-spinner-color: #000;
}

/* Small spinner (for compact sidebar quiz buttons). */
.js-loading-btn--spinner-sm .loader {
  --vlb-spinner-size: 12px;
  --vlb-spinner-border: 2px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}