---
const url = Astro.url;
const pathSegments = url.pathname.split("/").filter((segment) => segment);
const breadcrumbItems = pathSegments.map((segment, index) => {
  const href = "/" + pathSegments.slice(0, index + 1).join("/");
  const text = decodeURIComponent(segment.replace(/-/g, " "));
  return { href, text };
});
---

<div class="breadcrumb">
  <ul>
    {breadcrumbItems.map((item) => <li>{item.text}</li>)}
  </ul>
</div>

<style>
  @layer starlight.core {
    .breadcrumb {
      padding:0 2.4rem;
      padding-top: 0px;
    }
    ul {
      list-style: none;
      display: flex;
      /* gap: 0.5rem; */
      flex-wrap: wrap;
      font-size: 0.875rem;
      color: var(--sl-color-text);
      padding-left: 0px;
    }
    li {
      position: relative;
      text-transform: capitalize;
    }
    li::after {
      content: '';
      display: inline-block;
      width: 8px;
      height: 10px;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      background-image: url('data:image/svg+xml;utf8,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.50004 1L6.5 6L1.5 11" stroke="%23999999" stroke-width="1.5" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="round"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
 

    li:last-child {
      color: var(--sl-color-white);
    }
    li:last-child::after {
      display: none;
    }
  }
</style>
