.form-input {
  font-size: var(--font-size-base);
  line-height: var(--font-lh-sm);
  letter-spacing: 0.02em;
  background-color: var(--color-base-lightest);
  border-radius: 4px;
  padding: 12px 16px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  align-self: stretch;
}

.form-input::placeholder {
  color: var(--color-base);
}

.form-input:hover {
  border-color: var(--color-primary-light);
}

.form-input:disabled {
  border-color: var(--color-base-light);
}

.form-input:disabled::placeholder {
  color: var(--color-base-light);
}

.form-input:focus {
  background-color: var(--color-white);
}

.form-input:focus-visible {
  background-color: var(--color-white);
  outline-color: var(--color-primary);
}

.form-field.error .form-input {
  outline-color: var(--color-danger);
  border-color: var(--color-danger);
}

.form-field.success .form-input {
  outline-color: var(--color-success);
  border-color: var(--color-success);
}