/* GENERATED by scripts/build/tailwind/build-tailwind.ts — edit frameworks/tailwind/Theme.css or a manifest, not this file. */
@import '../../../Prelude.generated.css';

@layer utilities {
  .arena-spinner__root {
    display: inline-flex;
  }
  .arena-spinner__circle {
    display: inline-block;
    animation: arena-spinner var(--loop-spin) linear infinite;
    @media (prefers-reduced-motion: reduce) {
      animation-duration: var(--loop-reduced);
    }
    border-radius: var(--r-pill);
    border-style: var(--tw-border-style);
    border-width: var(--bw-strong);
    border-color: currentcolor;
    border-top-color: transparent;
  }
  .arena-spinner__root--tone-accent {
    color: var(--color-primary);
  }
  .arena-spinner__root--tone-gold {
    color: var(--color-secondary);
  }
  .arena-spinner__root--tone-neutral {
    color: var(--ink-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--ink-muted) var(--level-ink-muted), transparent);
    }
  }
  .arena-spinner__root--tone-on-accent {
    color: var(--color-primary-content);
  }
  .arena-spinner__circle--size-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }
  .arena-spinner__circle--size-md {
    width: var(--sp-5);
    height: var(--sp-5);
  }
  .arena-spinner__circle--size-lg {
    width: var(--sp-8);
    height: var(--sp-8);
  }
}