/* Native 32px cursors keep the OS pointer's timing and a fixed click hotspot. */
html:has(#app), body:has(#app), #app {
  --cursor-arrow: url('/assets/ui/cursors-v2/arrow.svg') 2 2, default;
  --cursor-link: url('/assets/ui/cursors-v2/pointer.svg') 10 3, pointer;
  --cursor-text: url('/assets/ui/cursors-v2/text.svg') 16 16, text;
  --cursor-resize: url('/assets/ui/cursors-v2/resize-ew.svg') 16 16, ew-resize;
  --cursor-drag: url('/assets/ui/cursors-v2/drag-ew.svg') 16 16, ew-resize;
  --cursor-disabled: url('/assets/ui/cursors-v2/disabled.svg') 16 16, not-allowed;
  --cursor-busy: url('/assets/ui/cursors-v2/busy.svg') 16 16, progress;
  --cursor-wolf: url('/assets/ui/cursors-v2/brush-wolf.svg') 5 28, crosshair;
  --cursor-mixed: url('/assets/ui/cursors-v2/brush-mixed.svg') 5 28, crosshair;
  --cursor-goat: url('/assets/ui/cursors-v2/brush-goat.svg') 5 28, crosshair;
  --cursor-erase: url('/assets/ui/cursors-v2/erase.svg') 5 27, crosshair;
  cursor: var(--cursor-arrow);
}

#app :is(a[href], button, summary, select, label[for], [role="button"],
  input[type="button"], input[type="submit"], input[type="reset"],
  input[type="checkbox"], input[type="radio"], input[type="color"], input[type="file"]) {
  cursor: var(--cursor-link);
}
#app :is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea,
  [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"], [role="textbox"]) {
  cursor: var(--cursor-text);
}

/* Both hovering and drawing use the selected nib, without a following DOM layer. */
#app canvas.ink { cursor: var(--cursor-mixed); }
#app canvas.ink[data-cursor-nib="wolf"] { cursor: var(--cursor-wolf); }
#app canvas.ink[data-cursor-nib="goat"] { cursor: var(--cursor-goat); }
#app canvas.ink[data-cursor-tool="erase"] { cursor: var(--cursor-erase); }

#app input[type="range"] { cursor: var(--cursor-resize); }
#app input[type="range"]:enabled:active { cursor: var(--cursor-drag); }
#app input[type="range"]::-webkit-slider-thumb { cursor: inherit; }
#app input[type="range"]::-moz-range-thumb { cursor: inherit; }

body #app :is(:disabled, [aria-disabled="true"]) { cursor: var(--cursor-disabled); }
body #app :is([aria-busy="true"], .painting-in-progress, .painting-progress-action),
#app .painting-stop-button:disabled { cursor: var(--cursor-busy); }
/* An inert scroll is skipped by hit testing, so paper outside it must agree. */
html:has(#app[inert]), body:has(#app[inert]), #app[inert] { cursor: var(--cursor-busy); }