/* Dropdown Item — WowVendor DS.
   Однострочный элемент выпадающего списка (дочерний компонент Select & Combobox,
   Dropdown List). Собран как отдельный мастер — раньше был свёрстан инлайново в tabs.

   Оси component set: Size(s/m) × Type(default/checkbox/image) × Interaction(default/
   hover-focus/selected/disabled/loading).
   - Type=Default  — ведущая иконка (folder) + label; Selected добавляет галочку.
   - Type=Checkbox — чекбокс + label + счётчик «0» (обычный текст gray-300).
   - Type=Image    — круглый аватар + label; Selected добавляет галочку.
   - Loading (любой Type) — спиннер + «Loading…».

   Значения — только var(--token) из token-index.md; типографика — utility-классами.
   Ширина элемента 236px и размеры иконок (16/20) — фикс. px (в Figma под токены не
   выведены, приём как габариты в counter/tabs). */

.di {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 236px;
  border-radius: var(--radius-4);
  background: transparent;
  color: var(--color-gray-900);
  font-family: var(--font-family-base);
  cursor: pointer;
}
.di--s { padding: var(--spacing-8); }
.di--m { padding: var(--spacing-8) var(--spacing-12); }

/* Контент: ведущий слот + label(flex-1) + трейлинг-слот, gap 8 */
.di__content {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-8);
  overflow: hidden;
}

.di__label {
  flex: 1 0 0;
  min-width: 0;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Ведущая иконка (Type=Default: folder) ---- */
.di__icon {
  flex-shrink: 0;
  display: block;
  color: var(--color-gray-400);
}
.di__icon svg { display: block; width: 100%; height: 100%; }
.di--s .di__icon { width: 16px; height: 16px; }
.di--m .di__icon { width: 20px; height: 20px; }

/* ---- Аватар (Type=Image) ---- */
.di__avatar {
  flex-shrink: 0;
  display: block;
  border-radius: 200px;
  object-fit: cover;
}
.di--s .di__avatar { width: 16px; height: 16px; }
.di--m .di__avatar { width: 20px; height: 20px; }

/* ---- Чекбокс (Type=Checkbox) — бокс без label, приём из компонента checkbox,
   но default-бордер здесь gray-200 (так в мастере Dropdown Item, не gray-100). ---- */
.di__box {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-4);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-0);
  color: var(--color-gray-0);          /* цвет галочки, когда бокс залит */
}
.di--s .di__box { width: 16px; height: 16px; }
.di--m .di__box { width: 20px; height: 20px; }
.di__box svg { display: none; width: 100%; height: 100%; }  /* viewBox 24 даёт inset */
.di__box--checked {
  background: var(--color-accent-400);
  border-color: var(--color-accent-400);
}
.di__box--checked svg { display: block; }

/* ---- Трейлинг-галочка (Selected у Type=Default/Image) ---- */
.di__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
  color: var(--color-accent-400);
}
.di__check svg { display: block; width: 100%; height: 100%; }

/* ---- Трейлинг-счётчик «0» (Type=Checkbox) — обычный текст ---- */
.di__counter {
  flex-shrink: 0;
  color: var(--color-gray-300);
  white-space: nowrap;
}

/* ---- Спиннер (Loading) — переиспользуем .spinner (цвет accent-400) ---- */
.di__spinner { flex-shrink: 0; }
.di--s .di__spinner { width: 16px; height: 16px; }
.di--m .di__spinner { width: 20px; height: 20px; }

/* ============ Состояния (Interaction) ============ */
/* Hover & Focus */
.di--hover { background: var(--color-gray-25); }

/* Selected: Default/Image — светлый фон gray-25; Checkbox — белый gray-0 */
.di--selected { background: var(--color-gray-25); }
.di--selected.di--checkbox { background: var(--color-gray-0); }

/* Disabled: тексты и иконка гаснут до gray-100, аватар — приглушение,
   чекбокс — «отключённый» вид (gray-25 фон / gray-50 бордер). */
.di--disabled { cursor: default; }
.di--disabled .di__label,
.di--disabled .di__counter,
.di--disabled .di__icon { color: var(--color-gray-100); }
.di--disabled .di__avatar { opacity: 0.4; }
.di--disabled .di__box {
  background: var(--color-gray-25);
  border-color: var(--color-gray-50);
}

/* ===== Живые интеракции (в статичной витрине для compare.mjs не срабатывают —
   там нет ни курсора, ни фокуса; используются в живом демо ниже). ===== */
.di--live:not(.di--disabled):not(.di--selected):hover { background: var(--color-gray-25); }
.di--live:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: -2px;
}
/* В живом демо галочка (Default/Image, single-select) — переключаемая:
   в разметке присутствует всегда, показывается только у выбранного пункта. */
.di--live .di__check { display: none; }
.di--live.di--selected .di__check { display: block; }