.breadcrumb {
  font: var(--typography-body-small);
  overflow-x: auto;
}

.breadcrumb__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '•';
  color: var(--color-text-dimmed);
  margin: 0 var(--spacing-xs);
}

.breadcrumb__link {
  --link-color: var(--color-text);
}

.breadcrumb__link[aria-current="page"] {
  --link-color: var(--color-text-dimmed);
  color: var(--color-text-dimmed);
}

@media (min-width: 1024px) {
  .breadcrumb__item {
    white-space: normal;
  }
}