Drill 11: Improve it — Forms and states

.field input {
  border: 1px solid #d6d0c7;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input:hover {
  border-color: #a8a29e;
}

.field input:focus-visible {
  outline: none;
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgb(47 111 237 / 0.25);
}

.field input:disabled {
  background: #f1eee9;
  color: #a8a29e;
  cursor: not-allowed;
}

.field.is-invalid input {
  border-color: #dc2626;
}