.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
  font-size: var(--text-sm);
}

.breadcrumb__link {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    color: var(--color-accent);
  }
}

.breadcrumb__sep {
  flex: 0 0 auto;
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
  color: var(--color-text-faint);
}

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