/*
 * Назначение файла: Стили для хлебных крошек
 */

.breadcrumbs {
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .breadcrumbs {
    margin-bottom: 16px;
  }
}

/* Крошки всегда в одну строку. Длинная цепочка (подкатегория, товар) раньше
   ломалась на две-три строки и рвала ритм верха страницы — теперь она уходит
   за правый край и листается пальцем или трекпадом. Затемнение по краям — та же
   механика, что у ленты тегов каталога (.catalog-tags__list): ширины краёв
   ставит breadcrumbs-scroll.js и в крайних положениях обнуляет, иначе маска
   съедала бы иконку дома и последний пункт там, где листать уже некуда.
   Без JS маска не видна вовсе — значения по умолчанию нулевые. */
.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--crumbs-fade-left, 0px),
    #000 calc(100% - var(--crumbs-fade-right, 0px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--crumbs-fade-left, 0px),
    #000 calc(100% - var(--crumbs-fade-right, 0px)),
    transparent 100%
  );
}

.breadcrumbs__list::-webkit-scrollbar {
  display: none;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--fs-md);
  color: var(--color-gray);
  line-height: var(--lh-none);
}

.breadcrumbs__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
  transform: rotate(-45deg);
  margin-left: 8px;
  opacity: 0.5;
}

.breadcrumbs__link {
  color: var(--color-gray);
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.breadcrumbs__link img {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumbs__link:hover {
    color: var(--color-accent);
  }
}

.breadcrumbs__current {
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
}