/* Breadcrumbs -see docs/strategy/design-system/24-breadcrumbs.md
 *
 * Single-line orientation strip modelled on Django admin's
 * `Home › Authentication and Authorization › Users` pattern, recolored
 * with the Mboko brand: small text, brand-tinted muted links, `›`
 * separator, current-page in solid text colour.
 *
 * Markup contract:
 *   <nav class="bc" aria-label="Breadcrumb">
 *     <a class="link" href="/">Home</a>
 *     <span class="sep" aria-hidden="true">›</span>
 *     <a class="link" href="/inventory/">Stock</a>
 *     <span class="sep" aria-hidden="true">›</span>
 *     <span class="now" aria-current="page">Storage areas</span>
 *   </nav>
 *
 * Variants:
 *   .bc.compact      -pill-shaped chip on a tinted surface
 *                      (use sparingly, e.g. inside a sticky topbar slot)
 */

.bc {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--muted);
}

.bc .sep {
  font-size: var(--font-size-caption);
  color: var(--border);
  user-select: none;
}

.bc .link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.bc .link:hover,
.bc .link:focus-visible {
  color: var(--primary-dark);
  text-decoration: underline;
  outline: none;
}

.bc .now {
  color: var(--text);
  font-weight: 600;
}

/* Compact pill variant -tinted background, smaller font. */
.bc.compact {
  font-size: var(--font-size-small);
  padding: 5px 10px;
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-sm);
}

.bc.compact .link {
  color: var(--primary);
  opacity: 0.75;
}

.bc.compact .sep {
  color: var(--primary);
  opacity: 0.35;
}

.bc.compact .now {
  color: var(--primary);
  font-weight: 700;
}