/* Inspiration gained from https://oat.ink/components/#spinner */
@layer components {
  [aria-busy='true'] {
    @apply relative;

    &:not(:empty)::after {
      @apply absolute inset-0 m-auto z-1;
    }

    &[data-variant='overlay'] {
      & > * {
        opacity: 0.3;
        pointer-events: none;
      }
    }
  }

  [aria-busy='true']::after {
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle-icon lucide-loader-circle"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>');
    @apply block size-6 animate-spin;
  }
}