/* ============================================
   <xm-breadcrumbs> — location trail.

   Surface / ink (AD-13): a transparent trail that traces its host surface.
   On the desk family: link ink var(--md-sys-color-on-surface-variant), hover
   var(--md-sys-color-on-surface); the CURRENT (last) item is coral
   var(--md-sys-color-primary) — the page indicator. The divider glyph is a
   muted neutral, never a status hue.

   BEM: block `breadcrumbs`; elements `__item` `__link` `__current`
   `__separator` `__slash`.
   ============================================ */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.breadcrumbs__link {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.breadcrumbs__link:hover {
  color: var(--md-sys-color-on-surface);
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}
.breadcrumbs__link:focus {
  outline: none;
}
.breadcrumbs__link:focus-visible {
  outline: none;
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--xm-state-focus-ring);
}

.breadcrumbs__current {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  color: var(--md-sys-color-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* A non-last item with no href: plain, non-interactive text — NOT the coral
   current-page treatment (only the last item is the current page). */
.breadcrumbs__text {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
  flex-shrink: 0;
}

.breadcrumbs__slash {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1;
}