@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.breadcrumb-demo-trigger {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       0;
  border:        0;
  border-radius: var(--radius-xs);
  background:    transparent;
  box-shadow:    none;
  color:         inherit;
  font:          inherit;
  cursor:        pointer;
  /* A 24px target (WCAG 2.5.8) that keeps the line height. */
  justify-content: center;
  min-width:     var(--space-6);
  min-height:    var(--space-6);
  margin-block:  min(0px, (1lh - var(--space-6)) / 2);
}

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

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

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

.breadcrumb-demo-heading {
  margin:    0;
  color:     var(--ink-dim);
  font-size: var(--text-ui);
}

/* Customization demo: chip crumbs (MUI's customization example), from
   class alone. */
.breadcrumb-demo-chips .breadcrumb-link,
.breadcrumb-demo-chips .breadcrumb-page {
  min-height:    var(--control-height-sm);
  padding:       0 var(--space-2);
  border-radius: var(--radius-pill);
  background:    var(--secondary);
  color:         var(--secondary-ink);
  transition:    background-color var(--duration-fast) var(--ease-out);
}

.breadcrumb-demo-chips .breadcrumb-link:hover {
  background: var(--secondary-hover);
}