/* Phase 1 form foundations. Existing business selectors remain in styles.css. */
.form-control,
input,
textarea,
select {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.form-control,
input,
textarea,
select {
  color: var(--color-text-primary);
  background: var(--color-surface-input);
  border-color: var(--color-border);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  font-size: var(--font-size-control);
  caret-color: var(--caret-color);
}

input::placeholder,
textarea::placeholder { color: var(--color-text-placeholder); }

input[type="search"],
input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

input[type="search"],
input[type="date"],
input[type="text"],
input[type="password"],
textarea,
select,
.form-control {
  -webkit-text-fill-color: var(--input-text);
}

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled {
  cursor: default;
  opacity: .62;
}