/* Magpie's cursors. Real CSS cursors, drawn by the system, so they never lag.
   Art and sources: ../cursors/. Each image is 32px (64px at 2x). The 1x PNGs come from the
   .1x.svg files, the same drawings with the glint and finger cuts moved onto whole pixels.

   Applied here automatically:
     the page                          default, the arrow with its gold glint
     links, buttons, [data-cursor=press]   press
     email and text fields, [data-cursor=text]   text
     [data-collect], [draggable=true], [data-cursor=grab]   grab
     the same, while held down, [data-cursor=grabbing]   grabbing

   While something is being dragged in JS, put .is-grabbing on <html>. The closed hand
   then holds everywhere, even as the drag passes over a button or a link.

   For your own rules use the variables: cursor: var(--cursor-grab);
   Use them from a stylesheet in css/, or toggle a class or data-cursor from JS. Don't set
   them as inline styles: a relative url() in a variable can resolve against the page.

   Hot spots: grab and grabbing share one, on the glint, so the hand closes in place.
   Plain text keeps the arrow. There is no I-beam over headlines. */

/* Native cursors, for touch and anything else that doesn't take the images. */
:root {
  --cursor-default: default;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-press: pointer;
  --cursor-text: text;
}

@media (hover: hover) and (pointer: fine) {
  /* Plain images first, for browsers without image-set in cursors. */
  :root {
    --cursor-default-img: url("../cursors/default.png") 4 3;
    --cursor-grab-img: url("../cursors/grab.png") 16 20;
    --cursor-grabbing-img: url("../cursors/grabbing.png") 16 20;
    --cursor-press-img: url("../cursors/press.png") 13 3;
    --cursor-text-img: url("../cursors/text.png") 12 16;
  }

  /* Older Safari and Chrome. */
  @supports (cursor: -webkit-image-set(url("../cursors/default.png") 1x) 4 3, default) {
    :root {
      --cursor-default-img: -webkit-image-set(url("../cursors/default.png") 1x, url("../cursors/default@2x.png") 2x) 4 3;
      --cursor-grab-img: -webkit-image-set(url("../cursors/grab.png") 1x, url("../cursors/grab@2x.png") 2x) 16 20;
      --cursor-grabbing-img: -webkit-image-set(url("../cursors/grabbing.png") 1x, url("../cursors/grabbing@2x.png") 2x) 16 20;
      --cursor-press-img: -webkit-image-set(url("../cursors/press.png") 1x, url("../cursors/press@2x.png") 2x) 13 3;
      --cursor-text-img: -webkit-image-set(url("../cursors/text.png") 1x, url("../cursors/text@2x.png") 2x) 12 16;
    }
  }

  @supports (cursor: image-set(url("../cursors/default.png") 1x) 4 3, default) {
    :root {
      --cursor-default-img: image-set(url("../cursors/default.png") 1x, url("../cursors/default@2x.png") 2x) 4 3;
      --cursor-grab-img: image-set(url("../cursors/grab.png") 1x, url("../cursors/grab@2x.png") 2x) 16 20;
      --cursor-grabbing-img: image-set(url("../cursors/grabbing.png") 1x, url("../cursors/grabbing@2x.png") 2x) 16 20;
      --cursor-press-img: image-set(url("../cursors/press.png") 1x, url("../cursors/press@2x.png") 2x) 13 3;
      --cursor-text-img: image-set(url("../cursors/text.png") 1x, url("../cursors/text@2x.png") 2x) 12 16;
    }
  }

  :root {
    --cursor-default: var(--cursor-default-img), default;
    --cursor-grab: var(--cursor-grab-img), grab;
    --cursor-grabbing: var(--cursor-grabbing-img), grabbing;
    --cursor-press: var(--cursor-press-img), pointer;
    --cursor-text: var(--cursor-text-img), text;
  }

  /* :where() keeps these at no specificity, so any rule in site.css wins without a fight. */
  html {
    cursor: var(--cursor-default);
  }

  :where(a[href], button, [role="button"], summary, select, label[for],
    input[type="submit"], input[type="button"], input[type="reset"],
    input[type="checkbox"], input[type="radio"], [data-cursor="press"]) {
    cursor: var(--cursor-press);
  }

  :where(textarea, [contenteditable="true"], [contenteditable=""],
    input:not([type]), input[type="email"], input[type="text"], input[type="search"],
    input[type="url"], input[type="tel"], input[type="password"], input[type="number"],
    [data-cursor="text"]) {
    cursor: var(--cursor-text);
  }

  :where([data-collect], [draggable="true"], [data-cursor="grab"]) {
    cursor: var(--cursor-grab);
  }

  :where([data-collect]:active, [draggable="true"]:active,
    [data-cursor="grab"]:active, [data-cursor="grabbing"]) {
    cursor: var(--cursor-grabbing);
  }

  :where(:disabled, [aria-disabled="true"], [data-cursor="default"]) {
    cursor: var(--cursor-default);
  }

  /* Mid-drag the closed hand wins everywhere. */
  html.is-grabbing,
  html.is-grabbing * {
    cursor: var(--cursor-grabbing) !important;
  }

  /* Ask for every image as the page loads, so the first hover never shows a native cursor
     while its picture arrives. A cursor list fetches all its images. This box has no size. */
  html::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    cursor: var(--cursor-grab-img), var(--cursor-grabbing-img), var(--cursor-press-img), var(--cursor-text-img), default;
  }
}