:root {
  --spinner-bg-color: rgba(51, 51, 51, 0.25);
  --spinner-color: #333;
}

body.dark {
  --spinner-bg-color: rgba(255, 255, 255, 0.25);
  --spinner-color: #FFF;
}

/* Spinner
/*------------------------------------------------------------*/
.spinner {
  width: 24px;
  height: 24px;
}

/* Spinner Circle Rotation */
.spinner--circle {
  border: 3px solid rgba(255, 255, 255, 0.25) ;
  border-top: 3px solid #FFF;
  border-radius: 50%;
  animation: spinner_animate 0.6s infinite linear;
}

.btn--outline .spinner--circle {
  width: 22px;
  height: 22px;
  border: 3px solid var(--spinner-bg-color);
  border-top: 3px solid var(--spinner-color);
}

@keyframes spinner_animate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}