/**
 * <Input> — vanilla component kit primitive.
 *
 * 34px height, 0.5px border, focus ring via --focus-ring.
 *
 * Markup:
 *   <input class="c-input" type="email" name="email" />
 *   <input class="c-input" type="password" />
 *   <input class="c-input c-input--invalid" aria-invalid="true" />
 */

.c-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

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

.c-input:hover:not(:disabled):not([readonly]) {
  border-color: var(--border-secondary);
}

.c-input:focus-visible {
  outline: none;
  border-color: var(--info-border);
  box-shadow: var(--focus-ring);
}

.c-input:disabled,
.c-input[readonly] {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.c-input--invalid,
.c-input[aria-invalid="true"] {
  border-color: var(--danger-border);
}

.c-input--invalid:focus-visible,
.c-input[aria-invalid="true"]:focus-visible {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.2);
}