/* Input — WowVendor DS. Все значения — токены из shared/token-index.md.
   Оси Figma: Interaction (Default/Hover/Active&Focus/Disabled) × Status
   (Default/Error/Warning) × Filled (True/False). Режим один (Dark Mode
   игнорируется по правилам проекта). */

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

/* ── Label ─────────────────────────────────────────────── */
.input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.input__label-text { color: var(--color-gray-900); }
.input__req        { color: var(--color-negative-500); }
.input__optional   { color: var(--color-gray-300); }
/* Подсказка у лейбла — под-компонент tooltip (design-system/components/tooltip).
   Триггер (icon-circle-help) переиспользуется как есть; см. tooltip.css. */
.input__label .tooltip { flex-shrink: 0; }

/* ── Field ─────────────────────────────────────────────── */
.input__field {
  box-sizing: border-box;
  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;
}
.input__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.input__icon svg { display: block; width: 20px; height: 20px; }

.input__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.input__value       { color: var(--color-gray-800); white-space: nowrap; }
.input__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.input__caret {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: var(--color-gray-800);
}

.input__clear {
  flex-shrink: 0;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray-200);
  cursor: pointer;
}
.input__clear svg { display: block; width: 16px; height: 16px; }

.input__suffix {
  flex-shrink: 0;
  color: var(--color-positive-500);
  text-align: right;
  white-space: nowrap;
}

/* ── Hint / message ────────────────────────────────────── */
.input__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.input__hint--error { color: var(--color-negative-500); }
.input__hint--warning {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-warning-400);
}
.input__hint--warning .input__hint-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-warning-300);
}
.input__hint--warning .input__hint-icon svg { display: block; width: 16px; height: 16px; }

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

/* Status=Error — рамка красная во всех interaction */
.input--status-error .input__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--status-error.input--focus .input__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

/* ── Интерактивный режим (.input--live) ────────────────────
   Реальный <input> вместо статичных span-ов: нативная каретка и
   ::placeholder, рамка реагирует на настоящие :hover/:focus-within.
   Статичный showcase-фрейм (с форсированными .input--hover/.input--focus)
   этих правил не касается — они действуют только внутри .input--live. */
.input__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-gray-800);
}
.input__input::placeholder { color: var(--color-gray-300); opacity: 1; }

/* clear-кнопка видна только когда в поле есть текст */
.input__input:placeholder-shown + .input__clear { display: none; }

.input--live .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.input--live .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
/* Status=Error — рамка красная и в :hover, при :focus-within 2px */
.input--live.input--status-error .input__field,
.input--live.input--status-error .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--live.input--status-error .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

/* ── Disabled ──────────────────────────────────────────── */
.input--disabled .input__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
}
.input--disabled .input__label-text,
.input--disabled .input__optional,
.input--disabled .tooltip__trigger,
.input--disabled .input__icon,
.input--disabled .input__value,
.input--disabled .input__placeholder,
.input--disabled .input__input,
.input--disabled .input__suffix,
.input--disabled .input__hint {
  color: var(--color-gray-100);
}
.input--disabled .input__input::placeholder { color: var(--color-gray-100); }
.input--disabled .input__input { cursor: not-allowed; }