@layer base {
  .skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--muted);
    border-radius: var(--radius);
    width: 100%;
    height: 1rem;
    animation: pulse var(--animation-duration-slow) ease-in-out infinite;
  }
  
  .skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    animation: shimmer 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      opacity: 0.85;
    }
    50% {
      opacity: 0.65;
    }
    100% {
      opacity: 0.85;
    }
  }
  
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  
  /* Dark mode adjustments */
  :global(.dark) .skeleton {
    background-color: var(--muted);
  }
  
  :global(.dark) .skeleton::after {
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
  }
}