@layer components {
  input[type="text"]:disabled,
  input[type="email"]:disabled,
  input[type="password"]:disabled,
  input[type="number"]:disabled,
  input[type="url"]:disabled,
  textarea:disabled,
  input[type="text"]:read-only,
  input[type="email"]:read-only,
  input[type="password"]:read-only,
  input[type="number"]:read-only,
  input[type="url"]:read-only,
  textarea:read-only {
    background-color: var(--color-gray-200);
    color: var(--color-gray-500);
    cursor: not-allowed;
  }
}