/**
* Styles for Swrve Loader component
*/
.sw-loader {
  @apply .rounded-full .border-porcelain .border-4;
  animation: spin 0.75s linear infinite;
}

/**
 * These rules extend `.sw-loader` to change border color depending on `use` prop
 */
.sw-loader.primary {
  border-left-color: theme('colors.primary.100');
}

.sw-loader.secondary {
  border-left-color: theme('colors.secondary.100');
}

.sw-loader.error {
  border-left-color: theme('colors.radicalRed.100');
}

.sw-loader.warning {
  border-left-color: theme('colors.sunshadeOrange.100');
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}