/* GENERATED — run pnpm build:components. Source: packages/registry/blend-cursor/blend-cursor.css */

/**
 * Blend Cursor
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-blend-cursor, and the one rule that reaches outside it is scoped to
 * .vc-blend-cursor-host, a class the factory adds and removes.
 *
 * Nothing here hides the native cursor except that host class, and the factory
 * only ever adds it while the disc is actually on screen. A stylesheet that
 * hid the cursor on its own would leave a page whose script failed to load
 * with no cursor at all.
 */

.vc-blend-cursor-host {
  cursor: none;
}

/**
 * The outer element carries position only, rewritten every frame from
 * JavaScript, and must never have a transition on transform — a transition
 * here would be a second animation fighting the easing.
 *
 * Centred by margin rather than by a translate(-50%, -50%) baked into the
 * transform, so the per-frame write stays a plain translate3d.
 */
.vc-blend-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--vc-z-tooltip);
  width: var(--vc-bc-size, 24px);
  height: var(--vc-bc-size, 24px);
  margin: calc(var(--vc-bc-size, 24px) / -2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--vc-dur-fast) var(--vc-ease-out);
}

.vc-blend-cursor--visible {
  opacity: 1;
}

/* Over a text field the real cursor is back, so this one gets out of the way. */
.vc-blend-cursor--yielded {
  opacity: 0;
}

/**
 * The inner element carries size and appearance, and swells on hover through a
 * transition. Separating the two transforms is what lets a CSS transition and
 * a per-frame write coexist on the same cursor.
 */
.vc-blend-cursor__disc {
  width: 100%;
  height: 100%;
  border-radius: var(--vc-radius-full);
  transform: scale(1);
  transition: transform var(--vc-dur-base) var(--vc-ease-spring);
}

.vc-blend-cursor--hover .vc-blend-cursor__disc {
  transform: scale(var(--vc-bc-swell, 2.5));
}

/**
 * Inverting the backdrop needs no colour at all, which is the whole reason it
 * is the default. Every fill that could be named instead collapses in one
 * theme or the other: measured against the token set, --vc-bg is invisible in
 * dark and --vc-ink is invisible in light, because `difference` against a
 * backdrop equal to the fill is black.
 */
.vc-blend-cursor__disc--invert {
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
}

/**
 * The named-colour alternative. --vc-accent is the default because it is the
 * one colour token that is mid-tone in both themes by construction, so the
 * difference against the page is large either way.
 */
.vc-blend-cursor__disc--blend {
  background: var(--vc-bc-color, var(--vc-accent));
  mix-blend-mode: var(--vc-bc-blend, difference);
}

/**
 * Belt and braces. The factory already stops easing and writes the disc
 * straight to the pointer under reduced motion; this covers the swell, which
 * is a CSS transition the factory has no hand in.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-blend-cursor,
  .vc-blend-cursor__disc {
    transition: none;
  }
}