/* Select — WowVendor DS. Все значения — токены из shared/token-index.md.
   Оси Figma component set (3772:82508): Interaction (Default/Hover/Active&Focus/
   Disabled) × Status (Default/Error) × Filled (True/False). Тем нет (Dark Mode
   в этом сете отсутствует).

   Анатомия повторяет input: Label-строка / поле 44px / hint. Отличия от input:
   нет поиска/clear/suffix/warning; есть трейлинг-chevron (arrow-down, в фокусе
   arrow-up) и, в состоянии Active&Focus, раскрытый выпадающий список (Dropdown
   List) из под-компонента dropdown-item.

   ПРИМЕЧАНИЕ по тени: поле в Figma использует эффект «Shadow XS»
   (0 1px 2px rgba(13,18,30,.04)), которого нет в token-index. Подставлен
   --shadow-4 (0 2px 4px rgba(20,20,20,.04)) — тот же приём, что в tooltip:
   при alpha 0.04 разница между тенями визуально неразличима. */

.select {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

/* ── Label ─────────────────────────────────────────────── */
.select__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.select__label-text { color: var(--color-gray-900); }
.select__req        { color: var(--color-negative-500); }
.select__optional   { color: var(--color-gray-300); }

/* Триггер подсказки у лейбла — иконка circle-help 16px (gray-200) в 20×20-
   обёртке (padding 2px). В этом сете popover не показан, поэтому берётся сам
   значок, а не полный компонент tooltip. */
.select__tooltip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-gray-200);
}
.select__tooltip svg { display: block; width: 16px; height: 16px; }

/* ── Field ─────────────────────────────────────────────── */
.select__field {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  /* Рамка — inset box-shadow (приём проекта: не меняет габарит поля 44px,
     2px-рамка фокуса не «раздувает» высоту, hint не смещается). */
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
  cursor: pointer;
}

.select__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__icon svg { display: block; width: 20px; height: 20px; }

/* Ведомый контент: placeholder ИЛИ value + опц. caption справа */
.select__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  overflow: hidden;
}
.select__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.select__value       { color: var(--color-gray-800); white-space: nowrap; }
.select__caption {
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-gray-300);
  text-align: right;
  white-space: nowrap;
}

/* Трейлинг-стрелка (arrow-down / arrow-up при раскрытии) */
.select__chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__chevron svg { display: block; width: 20px; height: 20px; }

/* ── Hint / message ────────────────────────────────────── */
.select__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.select__hint--error { color: var(--color-negative-500); }

/* ── Interaction (рамка) ───────────────────────────────── */
.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

/* Status=Error: default → negative-500, hover → negative-600 (темнее),
   focus → negative-500 2px. */
.select--status-error .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.select--status-error.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.select--status-error.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

/* ── Disabled ──────────────────────────────────────────── */
.select--disabled .select__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
  cursor: not-allowed;
}
.select--disabled .select__label-text,
.select--disabled .select__optional,
.select--disabled .select__tooltip,
.select--disabled .select__icon,
.select--disabled .select__placeholder,
.select--disabled .select__value,
.select--disabled .select__caption,
.select--disabled .select__chevron,
.select--disabled .select__hint {
  color: var(--color-gray-100);
}

/* ── Выпадающий список (Active & Focus) ────────────────────
   Dropdown List: абсолютно, выровнен по внешней 2px-рамке поля
   (left/right -2px), под полем (top 46px = высота поля 44 + 2px рамки).
   Требует overflow-visible у поля, чтобы список вышел за его границы. */
.select--focus .select__field { overflow: visible; }

.select__menu {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  cursor: default;
}
/* Пункт — переиспользованный dropdown-item (.di .di--m), но на всю ширину
   списка (в самом мастере ширина фикс. 236px). Ведущей иконки нет. */
.select__menu .di { width: 100%; }

/* Декоративный скролл-бар справа (в статике; указывает, что пунктов больше). */
.select__scrollbar {
  position: absolute;
  top: var(--spacing-8);
  right: 3px;
  bottom: var(--spacing-8);
  width: 4px;
}
.select__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

/* ── Живой интерактив (.select--live) — вне пиксельной сверки ──
   Реальное открытие/закрытие меню по клику/клавиатуре. */
.select--live .select__menu { display: none; }
.select--live.select--open .select__menu { display: flex; }
.select--live.select--open .select__field { overflow: visible; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.select--live .select__field:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }