.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0 var(--space-1);
  max-inline-size: 100%;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.breadcrumb__home,
.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-block-size: var(--tap);
  transition: color var(--duration-fast) ease;
}

.breadcrumb__home {
  justify-content: center;
  min-inline-size: 2rem;
}

.breadcrumb__home:hover,
.breadcrumb__link:hover {
  color: var(--color-forest-700);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-1);
  min-inline-size: 0;
}

.breadcrumb__item:last-child {
  flex-shrink: 1;
}

.breadcrumb__sep {
  color: var(--color-stone-400);
}

.breadcrumb__current {
  min-inline-size: 0;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}