/* ==========================================================================
   MOLECULES / breadcrumb / breadcrumb.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <nav aria-label="Breadcrumb">
       <ol class="breadcrumb">
         <li class="breadcrumb-item">
           <a class="breadcrumb-link" href="/">Beranda</a>
         </li>
         <li class="breadcrumb-item">
           <a class="breadcrumb-link" href="/produk">Produk</a>
         </li>
         <li class="breadcrumb-item breadcrumb-current" aria-current="page">
           Detail Produk
         </li>
       </ol>
     </nav>
   ========================================================================== */

.breadcrumb {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0;
  list-style:  none;
  margin:      0;
  padding:     0;
  font-size:   var(--text-body-sm-size);
}

.breadcrumb-item {
  display:     inline-flex;
  align-items: center;
}

/* Separator via CSS — tidak butuh extra HTML */
.breadcrumb-item + .breadcrumb-item::before {
  content:      '/';
  margin-inline: var(--size-200);
  color:        var(--color-text-disabled);
  user-select:  none;
  aria-hidden:  true;
}

/* Chevron separator variant */
.breadcrumb-chevron .breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  font-size: 1.1em;
}

.breadcrumb-link {
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-default);
  max-width:       160px;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}
.breadcrumb-link:hover { color: var(--color-text-primary); }
.breadcrumb-link:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius:  var(--radius-xs);
}

.breadcrumb-current {
  color:         var(--color-text-primary);
  font-weight:   var(--font-weight-medium);
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}