/* 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-skeleton__root {
    display: block;
    background-image: linear-gradient(100deg, var(--color-base-200) 30%, var(--color-base-300) 50%, var(--color-base-200) 70%);
    background-size: 220% 100%;
    animation: arena-shimmer var(--loop-shimmer) var(--ease-in-out) infinite;
    @media (prefers-reduced-motion: reduce) {
      animation: none;
      background-image: none;
      background-color: var(--color-base-200);
    }
  }
  .arena-skeleton__stack {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: calc(var(--sp-1) * 2.5);
  }
  .arena-skeleton__line {
    height: var(--sp-3);
    width: 100%;
    background-image: linear-gradient(100deg, var(--color-base-200) 30%, var(--color-base-300) 50%, var(--color-base-200) 70%);
    background-size: 220% 100%;
    animation: arena-shimmer var(--loop-shimmer) var(--ease-in-out) infinite;
    @media (prefers-reduced-motion: reduce) {
      animation: none;
      background-image: none;
      background-color: var(--color-base-200);
    }
    border-radius: var(--r-marker);
  }
  .arena-skeleton__last-line {
    height: var(--sp-3);
    width: 62%;
    background-image: linear-gradient(100deg, var(--color-base-200) 30%, var(--color-base-300) 50%, var(--color-base-200) 70%);
    background-size: 220% 100%;
    animation: arena-shimmer var(--loop-shimmer) var(--ease-in-out) infinite;
    @media (prefers-reduced-motion: reduce) {
      animation: none;
      background-image: none;
      background-color: var(--color-base-200);
    }
    border-radius: var(--r-marker);
  }
  .arena-skeleton__root--variant-line {
    height: var(--sp-3);
    width: 100%;
    border-radius: var(--r-marker);
  }
  .arena-skeleton__root--variant-block {
    height: var(--sp-24);
    width: 100%;
    border-radius: var(--r-surface);
  }
  .arena-skeleton__root--variant-circle {
    width: var(--sp-10);
    height: var(--sp-10);
    border-radius: var(--r-pill);
  }
}