/*
 * Крошки шапки: «Разделы › Группа › Раздел › Объект» (templates/unfold/helpers/header_title.html).
 *
 * Места в шапке мало: у карточки сайта рядом стоят кнопки. Поэтому ряд — однострочный
 * flex с переносом, развёрнутый `row-reverse`: части идут от текущей страницы (order 0) к
 * «Разделам», и то, что не поместилось, уходит на скрытую вторую строку. Пропадают части
 * слева: сначала «Разделы», потом группа, потом раздел. Текущая страница остаётся всегда,
 * а если не помещается и она — режется многоточием, так что домен читается в первую очередь.
 */
.pbn-crumbs {
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end;
  align-content: flex-start; align-items: center;
  height: 20px; min-width: 0; max-width: 100%; overflow: hidden; flex: 0 1 auto;
  line-height: 20px;
}
.pbn-crumb { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.pbn-crumb__text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -.01em; transition: color .15s ease;
}
a.pbn-crumb__text:hover { color: var(--color-primary-600); }
.pbn-crumb:not(.pbn-crumb--last) .pbn-crumb__text { font-weight: 500; opacity: .75; }
.pbn-crumb:not(.pbn-crumb--last) a.pbn-crumb__text:hover { opacity: 1; }
.pbn-crumb--last { flex-shrink: 1; }
.pbn-crumb__sep {
  flex: none; margin: 0 6px; font-size: 18px; line-height: 20px;
  color: var(--color-base-400);
}
html.dark .pbn-crumb__sep { color: var(--color-base-500); }