/**
 * Styles for Drupal breadcrumbs.
 */

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

.breadcrumb__path {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

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

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

.breadcrumb__current {
  display: block;
  flex-grow: 1;
  flex-shrink: 0;
}

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

.breadcrumb--single-item .breadcrumb__current::before {
  display: none;
}

.breadcrumb__delimiter::after {
  margin: 0 var(--spacing-xs);
  content: '•';
  color: var(--color-text-dimmed);
}

.breadcrumb__delimiter:last-child {
  display: none;
}

@media (min-width: 1024px) {
  .breadcrumb__path {
    display: inline;
    overflow: visible;
  }

  .breadcrumb__current {
    display: inline;
  }
}