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

/* Inline spinner placed before the text node. */
.btn-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
  animation: vlb-spin 0.75s linear infinite;
}

/* Small spinner variant (compact sidebar quiz links). */
.btn-spinner--sm {
  width: 12px;
  height: 12px;
  border-width: 2px;
  margin-right: 6px;
}

/* Disabled look while loading. */
.js-loading-btn.is-loading {
  pointer-events: none;
}

.btn-primary.is-loading,
.btn.btn-primary.is-loading {
  background-color: #3c3c3c;
}

.btn-secondary.is-loading {
  background-color: #fff;
  color: #aaa;
  border-color: #ccc;
}

@keyframes vlb-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}