:root {
  --canvas-cursor-default: url("../cursors/cursor-default.png") 1 1, default;
    --canvas-cursor-pointer: url("../cursors/cursor-pointer.png") 5 1, pointer;
    --canvas-cursor-grab: url("../cursors/cursor-grab.png") 9 10, grab;
    --canvas-cursor-grabbing: url("../cursors/cursor-grabbing.png") 9 10, grabbing;
    --canvas-cursor-zoom-in: url("../cursors/cursor-zoom-in.png") 8 8, zoom-in;
}

@supports (cursor: image-set(url("../cursors/cursor-default.png") 1x, url("../cursors/cursor-default@2x.png") 2x) 2 2, default) {
  :root {
    --canvas-cursor-default: image-set(url("../cursors/cursor-default.png") 1x, url("../cursors/cursor-default@2x.png") 2x) 1 1, default;
      --canvas-cursor-pointer: image-set(url("../cursors/cursor-pointer.png") 1x, url("../cursors/cursor-pointer@2x.png") 2x) 5 1, pointer;
      --canvas-cursor-grab: image-set(url("../cursors/cursor-grab.png") 1x, url("../cursors/cursor-grab@2x.png") 2x) 9 10, grab;
      --canvas-cursor-grabbing: image-set(url("../cursors/cursor-grabbing.png") 1x, url("../cursors/cursor-grabbing@2x.png") 2x) 9 10, grabbing;
      --canvas-cursor-zoom-in: image-set(url("../cursors/cursor-zoom-in.png") 1x, url("../cursors/cursor-zoom-in@2x.png") 2x) 8 8, zoom-in;
  }
}

@media (any-pointer: fine) {
  html,
  body,
  .portfolio,
  .portfolio__viewport,
  .portfolio .portfolio__presence-avatar {
    cursor: var(--canvas-cursor-default);
  }

  a[href],
  button:not(:disabled),
  select,
  summary,
  [role="button"]:not([aria-disabled="true"]),
  input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]) {
    cursor: var(--canvas-cursor-pointer);
  }

  input:not([type]),
  input:is([type="text"], [type="email"], [type="search"], [type="url"], [type="tel"], [type="password"], [type="number"]),
  textarea,
  [contenteditable="true"],
  :where(.article-content, .case-document__content, .canvas-page__content, .legal-document__content, .portfolio__feed .canvas-card) :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th) {
    cursor: text;
  }

  .portfolio__zoom-action:disabled,
  .canvas-card__action.is-disabled,
  .case-lightbox__action:disabled {
    cursor: var(--canvas-cursor-default);
  }

  .portfolio[data-canvas-tool="hand"] .portfolio__viewport,
  .portfolio.is-space-ready .portfolio__viewport,
  .case-lightbox__viewport.is-zoomed {
    cursor: var(--canvas-cursor-grab);
  }

  .portfolio.is-space-ready .portfolio__viewport,
  .portfolio.is-space-ready .portfolio__viewport * {
    cursor: var(--canvas-cursor-grab) !important;
  }

  .portfolio.is-panning .portfolio__viewport,
  .portfolio.is-panning .portfolio__viewport *,
  .canvas-card.is-dragging,
  .canvas-card.is-dragging *,
  .case-lightbox__viewport.is-panning,
  .case-lightbox__viewport.is-panning * {
    cursor: var(--canvas-cursor-grabbing) !important;
  }

  .portfolio .case-lightbox-trigger,
  .portfolio .case-lightbox-trigger * {
    cursor: var(--canvas-cursor-zoom-in);
  }

  [aria-busy="true"] {
    cursor: wait;
  }
}

@media (forced-colors: active) {
  :root {
    --canvas-cursor-default: default;
    --canvas-cursor-pointer: pointer;
    --canvas-cursor-grab: grab;
    --canvas-cursor-grabbing: grabbing;
    --canvas-cursor-zoom-in: zoom-in;
  }
}