prenix_components

@layer components {
  .animate-spinner-ease-spin {
    animation: spinner-spin 0.8s ease infinite;
  }

  @keyframes spinner-spin {
    0% {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(1turn);
    }
  }

  .animate-spinner-linear-spin {
    animation: spinner-spin 0.8s linear infinite;
  }

  .spinner {
    @apply relative inline-flex flex-col gap-2 items-center justify-center;
  }

  .spinner--default {
    --spinner: hsl(var(--default));
  }

  .spinner--primary {
    --spinner: hsl(var(--primary));
  }

  .spinner--secondary {
    --spinner: hsl(var(--secondary));
  }

  .spinner--success {
    --spinner: hsl(var(--success));
  }

  .spinner--warning {
    --spinner: hsl(var(--warning));
  }

  .spinner--danger {
    --spinner: hsl(var(--danger));
  }

  .spinner--current {
    --spinner: currentColor;
  }

  .spinner-content {
    @apply relative flex;
  }

  .spinner-icon-solid {
    @apply absolute w-full h-full rounded-full animate-spinner-ease-spin border-solid;
    @apply border-t-transparent border-l-transparent border-r-transparent border-[3px] border-b-[--spinner];
  }

  .spinner-icon-dotted {
    @apply absolute w-full h-full rounded-full opacity-75 animate-spinner-linear-spin;
    @apply border-dotted border-t-transparent border-l-transparent border-r-transparent border-[3px] border-b-[--spinner];
  }

  .spinner-content--sm {
    @apply w-5 h-5;
  }

  .spinner-content--md {
    @apply w-8 h-8;
  }

  .spinner-content--lg {
    @apply w-10 h-10;
  }
}