.text-field {
  border: 1px solid transparent;
  border-radius: 5pt;
  padding: 4px 8px;
  outline: none;
  background-color: canvas;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
}

.text-field.invalid {
  border-color: red;
  color: red;
}

.text-field:focus:not(.invalid) {
  border-color: color-mix(in srgb, canvas, #777 10%);
}

.text-field:read-only {
  cursor: pointer;
  background-color: color-mix(in srgb, canvas, #777 5%);
}

.text-field:read-only:hover:not(.invalid) {
  border-color: color-mix(in srgb, canvas, #777 10%);
}