/* Breadcrumbs — Figma 3714:81708
   Дополнительная навигация: цепочка ссылок «родитель → … → текущая страница».

   Размеры: S (12/16, gap 4, стрелка 12px), M (14/20, gap 8, стрелка 16px).
   Ссылка (Breadcrumb Link, 3714:81741) — приватный дочерний узел этого
   компонента, отдельным компонентом не выносится: используется только здесь.
   Её состояния: Default (gray-500), Hover (gray-600 + подчёркивание 1px),
   Active (gray-700, без подчёркивания), Current (gray-200, не кликается).

   Значения — только токены; типографика — utility-классами в разметке. */

.brc {
  display: flex;
  align-items: center;
}

.brc--s { gap: var(--spacing-4); }
.brc--m { gap: var(--spacing-8); }

/* ---- Ссылка ---- */
.brc__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-gray-500);
  cursor: pointer;
}

/* Подчёркивание — отдельный слой (в Figma это абсолютный прямоугольник
   «Underline» внутри ссылки, а не text-decoration). */
.brc__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.brc--m .brc__link::after { bottom: 0; }
.brc--s .brc__link::after { bottom: 1px; }

.brc__link:hover,
.brc__link--hover { color: var(--color-gray-600); }

.brc__link:hover::after,
.brc__link--hover::after { opacity: 1; }

.brc__link:active,
.brc__link--active { color: var(--color-gray-700); }

.brc__link:active::after,
.brc__link--active::after { opacity: 0; }

/* ---- Текущая страница: не ссылка, без состояний ---- */
.brc__current {
  color: var(--color-gray-200);
  cursor: default;
}
.brc__current::after { content: none; }

/* ---- Разделитель: icon-arrow-right, цвет фиксированный (gray-200) ----
   Иконка нарисована в viewBox 24 со stroke 1.6. В Figma стрелка в обоих
   размерах имеет толщину ровно 1.6px, поэтому stroke-width компенсируем
   масштабом viewBox: 24/16*1.6 = 2.4 и 24/12*1.6 = 3.2. */
.brc__sep {
  flex: none;
  display: block;
  color: var(--color-gray-200);
}
.brc--m .brc__sep { width: 16px; height: 16px; stroke-width: 2.4; }
.brc--s .brc__sep { width: 12px; height: 12px; stroke-width: 3.2; }