@layer components {
  [role="status"].skeleton {
    margin-block-end: var(--space-3);
    background: var(--muted);
    border-radius: var(--radius-medium);
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
    background-image: linear-gradient(
      90deg,
      var(--muted) 0%,
      color-mix(in srgb, var(--muted) 30%, white) 30%,
      var(--muted) 100%
    );

    [data-theme="dark"] & {
      background-image: linear-gradient(
        90deg,
        var(--muted) 0%,
        color-mix(in srgb, var(--muted) 90%, var(--foreground)) 90%,
        var(--muted) 100%
      );
    }

    &.box {
      width: 4rem;
      height: 4rem;
    }

    &.line {
      height: 1rem;
      width: 100%;
    }
  }

  [role="status"].skeleton:last-child {
    margin-block-end: 0;
  }

  @keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
}