@layer base {
  .skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--muted);
    border-radius: var(--radius);
    width: 100%;
    height: 1rem;
  }

  .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.4),
      transparent
    );
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  :global(.dark) .skeleton {
    background-color: var(--muted);
  }

  :global(.dark) .skeleton::after {
    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
  }
}