/* Chips — WowVendor DS. Компактные чипсы для отображения, сортировки и
   фильтрации однородных объектов. Текст лейбла — до 20 символов.

   Оси: Size (s/m) × Interaction (default/hover-focus/active/disabled)
        × Removable (крестик удаления) × Counter (счётчик).

   Два типа по Removable:
     - Removable=False (toggle-чип, одиночный/множественный выбор):
         default  — белый фон, рамка gray-100, текст gray-900;
         hover    — белый фон, рамка и текст accent-600;
         active   — заливка accent-400, текст gray-0 (выбран);
         disabled — фон gray-25, текст gray-200.
       Опц. зелёная точка-индикатор сверху-справа (кроме disabled).
     - Removable=True (выбранный чип с крестиком, всегда залит):
         default/active — accent-400; hover — accent-300; disabled — gray-25.
       Текст и крестик gray-0 (disabled — gray-200). Индикатора нет.

   Под-компоненты переиспользуются, а не рисуются заново:
     counter (Secondary), indicator (green), иконка icon-cross.
   Рамку рисуем inset box-shadow, чтобы она не меняла габариты чипа.
   Значения — только токены; типографика — utility-классами в разметке. */

.chips {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--spacing-4);
  border-radius: var(--radius-32);   /* пилюля: 32 >= половины высоты (14/18) */
  font-family: var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

/* ---- Размеры / отступы ---- */
.chips--s { padding: var(--spacing-6) var(--spacing-12); }
.chips--m { padding: var(--spacing-8) var(--spacing-16); }
/* правый отступ меньше, когда справа стоит counter или крестик */
.chips--s.chips--trailing-counter,
.chips--s.chips--trailing-cross   { padding-right: var(--spacing-6); }
.chips--m.chips--trailing-counter { padding-right: var(--spacing-8); }
.chips--m.chips--trailing-cross   { padding-right: var(--spacing-12); }

/* ==== Removable=False (toggle) ==== */
.chips--default  { background: var(--color-gray-0);     color: var(--color-gray-900);   box-shadow: inset 0 0 0 1px var(--color-gray-100); }
.chips--hover    { background: var(--color-gray-0);     color: var(--color-accent-600); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); }
.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); }

/* ==== Removable=True (выбранный, залит) ==== */
.chips--removable.chips--default  { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--hover    { background: var(--color-accent-300); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); box-shadow: none; }

/* ---- Крестик удаления (icon-cross), цвет наследуется от color чипа ---- */
.chips__cross { flex: none; display: block; }
.chips__cross svg { display: block; width: 100%; height: 100%; }
.chips--s .chips__cross { width: 12px; height: 12px; }
.chips--m .chips__cross { width: 16px; height: 16px; }

/* ---- Индикатор (зелёная точка) — слот только у non-removable ----
   Переиспользуем компонент indicator; в контексте chips точка — positive-300
   (в самом компоненте indicator дефолт green = positive-400). */
.chips__indicator { position: absolute; top: -1px; right: -1px; }
.chips--active .chips__indicator { top: 0; right: 0; }
.chips .indicator { color: var(--color-positive-300); }

/* ===== Живые интеракции (реальное поведение; в статичной витрине для
   compare.mjs не срабатывают). ===== */
/* toggle-чип (Removable=False): hover невыбранного (Default) */
.chips--default:not(.chips--removable):not(.chips--disabled):hover {
  color: var(--color-accent-600);
  box-shadow: inset 0 0 0 1px var(--color-accent-600);
}
/* removable-чип (всегда залит): hover */
.chips--removable.chips--default:not(.chips--disabled):hover {
  background: var(--color-accent-300);
}
.chips:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}