/* Native image is the fallback before JS starts and for reduced motion. */
@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body * {
    cursor: var(--tooto-cursor, var(--tooto-cursor-image) 17 18, auto) !important;
  }

  body :is(a, button, summary, label, select, [role='button'], [role='tab'], input[type='checkbox'], input[type='radio']),
  body :is(a, button, summary, label, [role='button'], [role='tab']) * {
    cursor: var(--tooto-cursor, var(--tooto-cursor-image) 17 18, pointer) !important;
  }

  body :is(textarea, input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='password'], input[type='tel'], input[type='url'], input[type='number'], [contenteditable]:not([contenteditable='false'])),
  body [contenteditable]:not([contenteditable='false']) * {
    cursor: text !important;
  }

  body :is(:disabled, [aria-disabled='true']),
  body :is(:disabled, [aria-disabled='true']) * {
    cursor: not-allowed !important;
  }

  body :is([draggable='true'], [draggable='true'] *) {
    cursor: grab !important;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-tooto-cursor-active] { --tooto-cursor: none; }
}

#tooto-inertia-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  width: 32px;
  height: 32px;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent var(--tooto-cursor-image) center / contain no-repeat;
  pointer-events: none !important;
  user-select: none;
  will-change: transform;
}

#tooto-inertia-cursor::backdrop { background: transparent; pointer-events: none; }