---
type Item = { label: string; href?: string };
const { items } = Astro.props as { items: Item[] };
---

<nav class="atlas-breadcrumbs content-grid" aria-label="Навигационная цепочка">
  <ol>
    {items.map((item, index) => <li>
      <span class="atlas-breadcrumbs__knot" aria-hidden="true"></span>
      {item.href ? <a href={item.href}>{item.label}</a> : <span aria-current="page">{item.label}</span>}
      {index < items.length - 1 && <span class="atlas-breadcrumbs__line" aria-hidden="true"></span>}
    </li>)}
  </ol>
</nav>

<style>
  .atlas-breadcrumbs { padding-top: 34px; }
  ol { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
  ol::-webkit-scrollbar { display: none; }
  li { display: flex; align-items: center; flex: 0 0 auto; color: var(--text-muted); font-size: 12px; }
  a, li > span[aria-current] { padding: 8px 9px; color: inherit; text-decoration: none; white-space: nowrap; }
  a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
  li > span[aria-current] { color: var(--text-primary); font-weight: 750; }
  .atlas-breadcrumbs__knot { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--paper); }
  li:last-child .atlas-breadcrumbs__knot { border-color: var(--accent-muted); background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb,var(--lime) 18%,transparent); }
  .atlas-breadcrumbs__line { width: clamp(18px, 3vw, 42px); height: 1px; background: repeating-linear-gradient(90deg,var(--border-strong) 0 5px,transparent 5px 8px); }
  @media (max-width: 720px) { .atlas-breadcrumbs { width: calc(100% - 28px); padding-top: 22px; } a, li > span[aria-current] { padding-inline: 7px; } }
</style>