/* =========================================================
   AJUS breadcrumb
   Trail of ancestors as an ordered list. The base class IS the <ol>.

       <nav aria-label="Breadcrumb">
           <ol class="ajus-breadcrumb">
               <li class="ajus-breadcrumb__item">
                   <a class="ajus-breadcrumb__link" href="/">Home</a>
                   <i class="fas fa-chevron-right ajus-breadcrumb__sep" aria-hidden="true"></i>
               </li>
               <li class="ajus-breadcrumb__item ajus-breadcrumb__item--current" aria-current="page">Reports</li>
           </ol>
       </nav>
   ========================================================= */

.ajus-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.ajus-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ajus-breadcrumb__link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.16s ease;
}

.ajus-breadcrumb__link:hover,
.ajus-breadcrumb__link:focus-visible {
    color: var(--color-primary);
    text-decoration: none;
}

.ajus-breadcrumb__link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.ajus-breadcrumb__sep {
    font-size: 0.62rem;
    color: var(--color-text-soft);
}

.ajus-breadcrumb__item--current {
    color: var(--color-text-main);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32ch;
}