/**
 * Text input control — Figma node 1:324 (Input Box)
 * Used inside .fh-field; styles the native <input> element.
 */

.fh-input {
  display: block;
  width: 100%;
  height: var(--fh-input-height);
  margin: 0;
  padding: 0 var(--fh-input-padding-x);
  font-family: var(--fh-font-family);
  font-size: var(--fh-font-size-input);
  font-weight: var(--fh-font-weight-input);
  line-height: var(--fh-line-height-input);
  color: var(--fh-color-text);
  background-color: var(--fh-color-surface);
  border: var(--fh-border-width) solid var(--fh-color-border-input);
  border-radius: var(--fh-radius-input);
  appearance: none;
  transition: border-color var(--fh-transition-fast);
}

.fh-input::placeholder {
  color: var(--fh-color-text-placeholder);
}

.fh-input:focus {
  outline: none;
  border-color: var(--fh-color-border-focus);
}

.fh-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}