.spinner {
  @apply .h-4 .relative .bg-transparent;
  pointer-events: none;

  &.spinner-xl {
    @apply .h-16;
  }

  &:after {
    @apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
    animation: spinners--spin 500ms infinite linear;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    content: '';
    left: calc(50% - (1em / 2));
  }

  &.spinner-xl:after {
    @apply .h-16 .w-16;
    left: calc(50% - (4rem / 2));
  }

  /**
   * Speeds
   */
  &.spin-slow:after {
    animation: spinners--spin 1200ms infinite linear;
  }

  /**
   * Spinner Colors
   */
  &.blue:after, &.text-blue:after {
    @apply .border-blue;
  }

  &.white:after, &.text-white:after {
    @apply .border-white;
  }

  &.spinner-thick:after {
    @apply .border-4;
  }
}

@keyframes spinners--spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}