:where(.breadcrumb) {
  display: flex;
  align-items: center;
  column-gap: var(--spacing-4);
  flex-wrap: wrap;

  font-size: var(--font-size-xs);
  line-height: 1;
  overflow-wrap: break-word;
}

.breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: var(--font-size-base);
  color: var(--primary-700);
  text-decoration: none;
  line-height: 1;
}

.breadcrumb__icon:hover {
  color: var(--primary-600);
}

.breadcrumb__link {
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
  color: var(--gray-900);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.breadcrumb__link:hover {
  color: var(--text-primary);
  background-color: var(--primary-100);
}

.breadcrumb__link:focus-visible,
.breadcrumb__icon:focus-visible {
  outline: var(--border-style-solid) var(--border-width-medium) var(--primary-500);
  outline-offset: var(--border-width-medium);
}

.breadcrumb__current {
  color: var(--primary-700);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb__separator,
.breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}