/*
Breadcrumb

<nav class="breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"> <a class="breadcrumb-link"> | <span class="breadcrumb-page">
    <li class="breadcrumb-separator"> <svg>
    <li class="breadcrumb-item"> <span|button class="breadcrumb-ellipsis">

Quiet links in the UI type, the current page in full ink. Hover changes
color only. Separators flip under rtl.
*/

@layer components {

.breadcrumb {
  min-width: 0;
}

.breadcrumb-list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1-5);
  margin:      0;
  padding:     0;
  list-style:  none;
  font-family: var(--font-ui);
  font-size:   var(--text-ui);
  line-height: var(--leading-snug);
  color:       var(--ink-dim);
  overflow-wrap: anywhere;
}

.breadcrumb-item {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-1-5);
  margin:      0;
  padding:     0;
}

.breadcrumb-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  color:           inherit;
  text-decoration: none;
  border-radius:   var(--radius-xs);
  transition:      color var(--duration-fast) var(--ease-out);
  justify-content: center;
  /* A 24px target (WCAG 2.5.8) at any type size, an icon-only link
     included; the negative margin keeps the line where the text puts it. */
  min-width:       var(--space-6);
  min-height:      var(--space-6);
  margin-block:    min(0px, (1lh - var(--space-6)) / 2);
}

.breadcrumb-link:hover {
  color: var(--ink);
}

/* The current page kept as a link (APG, MUI "Active last breadcrumb"):
   page ink, still a link. */
.breadcrumb-link.is-current {
  color: var(--ink);
}

.breadcrumb-link:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.breadcrumb-link svg,
.breadcrumb-page svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

.breadcrumb-page {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-1);
  color:       var(--ink);
  font-weight: var(--weight-regular);
}

/* An entry with no link that is not the current page. */
.breadcrumb-page.is-plain {
  color: inherit;
}

.breadcrumb-separator {
  display:      inline-flex;
  align-items:  center;
  margin:       0;
  padding:      0;
  color:        var(--ink-dim);
}

.breadcrumb-separator svg {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

:dir(rtl) .breadcrumb-separator svg {
  scale: -1 1;
}

.breadcrumb-ellipsis {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--control-height-sm);
  height:          var(--control-height-sm);
  margin-block:    calc((var(--control-height-sm) - 1lh) / -2);
  padding:         0;
  border:          0;
  border-radius:   var(--radius-control);
  background:      transparent;
  box-shadow:      none;
  color:           inherit;
  font:            inherit;
}

.breadcrumb-ellipsis svg {
  width:  var(--icon-size);
  height: var(--icon-size);
}

button.breadcrumb-ellipsis {
  cursor: pointer;
}

button.breadcrumb-ellipsis:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

button.breadcrumb-ellipsis:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

}