@layer elements {
  @keyframes skeleton-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .skeleton {
    display: block;
    background: linear-gradient(90deg, var(--theme-surface-tertiary) 25%, var(--theme-surface-primary) 50%, var(--theme-surface-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      animation: none;
      background: var(--theme-surface-tertiary);
    }
  }
  .skeleton--swatch {
    aspect-ratio: 1/1;
  }
}