@layer components {
  .empty {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  .empty__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-2);
    border-radius: 999px;
    background: var(--surface-sunken);
  }

  .empty__title { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
}