/* =========================
   Input – Base
========================= */

.km-input {
  height: 44px;
  width: 100%;

  padding: 0 12px;

  font-family: var(--font-family-base);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);

  border-radius: 8px;
  border: 1px solid var(--color-bg-primary);
  background-color: var(--color-bg-secondary);

  color: var(--color-text-primary);
  outline: none;
}

/* Placeholder */
.km-input::placeholder {
  color: var(--color-text-muted);
}

/* =========================
   Default
========================= */

.km-input--default {
  /* dùng base */
}

/* =========================
   Disabled
========================= */

.km-input--disabled {
  cursor: not-allowed;
}

.km-input--disabled::placeholder {
  opacity: 0.6;
}

/* =========================
   Error
========================= */

.km-input--error {
  border-color: var(--color-state-error);
  color: var(--color-state-error);
}

.km-input--error::placeholder {
  color: var(--color-state-error);
}