/* Хлебные крошки портала (Lists/PortalBreadcrumbs) на MudBreadcrumbs — весь их вид здесь: раскладка без отступов
   Material, цвета токенами портала (в герое тёмной темы токены переопределяет сам герой) и то, что сжимается,
   когда строка не помещается. В списке крошки чередуются с разделителями: третья крошка — пятый элемент. */
.portal-crumbs.mud-breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 13px;
}

.portal-crumbs .mud-breadcrumb-separator {
  padding: 0;
}

.portal-crumbs .portal-crumbs-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

.portal-crumbs .mud-breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.portal-crumbs .mud-breadcrumb-item a:hover {
  color: var(--accent);
}

.portal-crumbs .portal-crumbs-current {
  color: var(--text-secondary);
}

/* «Главная» и раздел остаются целыми. */
.portal-crumbs .mud-breadcrumb-item {
  flex-shrink: 0;
}

/* Всё после раздела может сжаться с многоточием: иначе длинное название срезает край экрана. */
.portal-crumbs .mud-breadcrumb-item:nth-child(n+5) {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* Название объекта перед текущей страницей уступает место первым: страница обычно названа коротко, и её лучше
   видеть целиком. Вес так велик, чтобы на долю текущей страницы не пришлось и доли пикселя — иначе многоточие
   появилось бы и у неё. Уже трёх букв название не становится: дальше сжимается текущая страница. */
.portal-crumbs .mud-breadcrumb-item:nth-child(n+5):not(:last-child) {
  flex-shrink: 100000;
  min-width: 3em;
}

.portal-crumbs .mud-breadcrumb-item a,
.portal-crumbs .portal-crumbs-current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}