/* ======================================================
   File: assets/css/forms.css
   Purpose: Custom styles for form enhancements, like
            button loading spinners.
   ====================================================== */

/* This class will be added to the button during submission */
.cs-btn.cs-btn--loading {
  position: relative;
  /* Prevent clicking the button again while loading */
  pointer-events: none;
  /* Hide the original button text */
  color: transparent !important;
  transition: color 0.2s ease;
}

/* The spinner element that will be injected by JavaScript */
.cs-btn--loading .btn-loading-spinner {
  /* Make it a circle */
  border-radius: 50%;
  /* Size */
  width: 24px;
  height: 24px;
  /* Animation */
  animation: btn-spin 1s linear infinite;
  /* Colors - a white circle with a semi-transparent track */
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  /* Positioning - center it inside the button */
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px; /* Half of width */
  margin-top: -12px;  /* Half of height */
}

/* The spinning keyframe animation */
@keyframes btn-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}