/* Button Loader (Spinner) */
.button-loader {
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top: 2px solid var(--background);
  /* Default loader color */
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* Adjust loader color when the parent has the transparent-outline class */
.transparent-outline .button-loader {
  border-top-color: var(--color);
  /* Default accent color for transparent-outline */
}

.transparent-outline.error .button-loader {
  border-top-color: var(--error-color);
  /* Error color */
}

.transparent-outline.success .button-loader {
  border-top-color: var(--success-color);
  /* Success color */
}

.transparent-outline.warning .button-loader {
  border-top-color: var(--warning-color);
  /* Warning color */
}

.transparent-outline.question .button-loader {
  border-top-color: var(--question-color);
  /* Question color */
}

.transparent-outline.odd .button-loader {
  border-top-color: var(--odd-color);
  /* Odd color */
}

/* Add more classes if necessary following the same pattern */

/* Animation for Loader */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Button: Disabled State */
.button.disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}