:host {
  display: block;
  container-type: inline-size;
  font-family: var(--breadcrumb-font-family);
  font-size: var(--breadcrumb-font-size);
  line-height: var(--breadcrumb-line-height);
  color: var(--breadcrumb-item-text-default);
}

.root {
  display: block;
}

.trail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--breadcrumb-gap-item);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Keep the trail on a single line; overflow goes to the menu, not wrap. */
  white-space: nowrap;
  min-width: 0;
}

.crumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.separator {
  display: inline-flex;
  align-items: center;
  color: var(--breadcrumb-separator-color);
  width: var(--breadcrumb-separator-size);
  height: var(--breadcrumb-separator-size);
}

/* Drive the mud-icon stroke color through the shared --icon-color custom prop
   (the mud-icon `color=` attribute API has been retired across the system). */
.separator mud-icon,
.back-link mud-icon,
.crumb-icon-start {
  --icon-color: currentcolor;
}

.separator--text {
  width: auto;
  height: auto;
}

/* ----- Crumb leaf (anchor or text) ----- */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap-item);
  padding-inline: var(--breadcrumb-item-padding-inline);
  padding-block: var(--breadcrumb-item-padding-block);
  border-radius: var(--breadcrumb-item-border-radius);
  color: var(--breadcrumb-item-text-default);
  background: transparent;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--breadcrumb-font-weight-default);
  border: none;
  cursor: default;
  /* Cap each crumb at ~30 visible characters; the TS render wraps longer
     labels in <mud-tooltip> so the full text is still discoverable. */
  max-width: 30ch;
  min-width: 0;
  transition:
    color 150ms ease-out,
    text-decoration-color 150ms ease-out;
}

.crumb--link {
  cursor: pointer;
}

.crumb-label {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap-item);
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

/* When the long-label tooltip is used, the mud-tooltip wraps the whole
   `<a class="crumb">` (link sits in slot="trigger"). The link itself still
   carries `max-width: 30ch`, so the inner `.crumb-text` truncates normally —
   no extra flex propagation needed here. */
.crumb-item mud-tooltip {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}

.crumb-icon-start {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.crumb-text {
  /* `text-overflow: ellipsis` only applies to block / inline-block boxes; the
     default `<span>` is inline, so we promote it. `min-width: 0` + flex shrink
     lets the text shrink inside the flex chain so the parent's max-width:30ch
     cap actually triggers truncation. */
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb--link:hover {
  color: var(--breadcrumb-item-text-hover);
  text-decoration: underline;
  text-underline-offset: var(--spacing-2);
  text-decoration-thickness: 1px;
}

.crumb--link:active {
  color: var(--breadcrumb-item-text-active);
}

.crumb--link:focus-visible {
  outline: none;
  /* Figma Focus Ring/Small: a 1px white halo inside a blue band that ends 3px out. */
  box-shadow:
    0 0 0 var(--breadcrumb-focus-ring-offset) var(--focus-ring-color-inner),
    0 0 0 var(--breadcrumb-focus-ring-width) var(--focus-ring-color-outer);
}

.crumb--active {
  color: var(--breadcrumb-item-text-active);
  font-weight: var(--breadcrumb-font-weight-active);
  cursor: default;
}

.crumb--visited {
  color: var(--breadcrumb-item-text-visited);
}

.crumb--disabled {
  color: var(--breadcrumb-item-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.crumb--loading {
  cursor: progress;
}

/* ----- Overflow trigger + menu ----- */
.overflow-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-24);
  height: var(--spacing-20);
  padding-inline: var(--breadcrumb-item-padding-inline);
  border: none;
  background: transparent;
  color: var(--breadcrumb-item-text-default);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border-radius: var(--breadcrumb-item-border-radius);
  cursor: pointer;
  transition: color 150ms ease-out;
}

.overflow-trigger:hover {
  color: var(--breadcrumb-item-text-hover);
}

.overflow-trigger:focus-visible {
  outline: none;
  /* Figma Focus Ring/Small: a 1px white halo inside a blue band that ends 3px out. */
  box-shadow:
    0 0 0 var(--breadcrumb-focus-ring-offset) var(--focus-ring-color-inner),
    0 0 0 var(--breadcrumb-focus-ring-width) var(--focus-ring-color-outer);
}

.crumb-item--overflow {
  position: relative;
}

.overflow-menu {
  position: absolute;
  top: calc(100% + var(--spacing-4));
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--breadcrumb-menu-padding);
  list-style: none;
  gap: var(--breadcrumb-menu-gap);
  background: var(--breadcrumb-menu-background);
  border-radius: var(--breadcrumb-menu-border-radius);
  box-shadow: var(--breadcrumb-menu-shadow);
  min-width: var(--breadcrumb-menu-min-width);
}

/* Roving focus indication driven by `aria-activedescendant` — the menu items
   never receive real DOM focus (the trigger keeps it), so we visualise the
   active descendant with a class instead of `:focus-visible`. */
.overflow-menu-item--focused {
  background: var(--breadcrumb-menu-item-background-hover);
  color: var(--breadcrumb-menu-item-text-hover);
}

.overflow-menu-item {
  display: block;
  width: 100%;
  padding-inline-start: var(--breadcrumb-menu-item-padding-inline-start);
  padding-inline-end: var(--breadcrumb-menu-item-padding-inline-end);
  padding-block: var(--breadcrumb-menu-item-padding-block);
  border: none;
  background: var(--breadcrumb-menu-item-background-default);
  color: var(--breadcrumb-menu-item-text-default);
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--breadcrumb-menu-item-font-weight);
  border-radius: var(--breadcrumb-menu-item-border-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.overflow-menu-item:hover {
  background: var(--breadcrumb-menu-item-background-hover);
  color: var(--breadcrumb-menu-item-text-hover);
}

.overflow-menu-item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
}

/* ----- Mobile back link ----- */
.trail--mobile {
  white-space: nowrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-back-gap);
  padding-inline: var(--breadcrumb-item-padding-inline);
  padding-block: var(--breadcrumb-item-padding-block);
  border-radius: var(--breadcrumb-item-border-radius);
  color: var(--breadcrumb-item-text-default);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 150ms ease-out;
}

.back-link:hover {
  color: var(--breadcrumb-item-text-hover);
}

.back-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
}

/* ----- Responsive switching ----- */
.desktop {
  display: block;
}

.mobile {
  display: none;
}

/* Viewport-based collapse (covers small screens). */
@media (max-width: 640px) {
  .root[data-responsive='true'] .desktop {
    display: none;
  }
  .root[data-responsive='true'] .mobile {
    display: block;
  }
}

/* Container-based collapse (covers in-flow narrow containers like cards). */
@container (max-width: 640px) {
  .root[data-responsive='true'] .desktop {
    display: none;
  }
  .root[data-responsive='true'] .mobile {
    display: block;
  }
}

/* Slot fallback — render slotted items inline. Consumers are expected
 * to use `<mud-breadcrumb items={...}>` for separator handling; the slot
 * mode lets advanced consumers provide their own separator markup between
 * items if they need finer control. */
.trail--slot {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--breadcrumb-gap-item);
}

.trail--slot ::slotted(mud-breadcrumb-item) {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap-item);
}

/* The consumer's `<… slot="separator">` light-DOM child has no matching
 * named slot in the shadow root (we clone it via componentWillLoad and
 * re-insert per separator), so the browser doesn't paint it automatically —
 * no display:none rule needed. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .crumb,
  .overflow-trigger,
  .overflow-menu-item,
  .back-link {
    transition: none;
  }
}