@layer components {
  .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
  .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.375rem; }
  .breadcrumb-link { color: var(--muted-foreground); text-decoration: none; transition: color 150ms ease; &:hover { color: var(--foreground); } }
  .breadcrumb-separator { color: var(--muted-foreground); font-size: 0.75rem; & svg { width: 0.875rem; height: 0.875rem; } }
  .breadcrumb-page { color: var(--foreground); font-weight: 400; }
  .breadcrumb-ellipsis { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--muted-foreground); }
}