:root {
	--qa-cursor-size: 34px;
}

#qa-cursor-trail,
#qa-custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	user-select: none;
}

#qa-cursor-trail {
	z-index: 2147483645;
	width: 100vw;
	height: 100vh;
}

#qa-custom-cursor {
	z-index: 2147483646;
	width: var(--qa-cursor-size);
	height: var(--qa-cursor-size);
	op: calc(var(--qa-cursor-size) * -0.5);
	left: calc(var(--qa-cursor-size) * -0.5);
	opacity: 0;
	will-change: transform, filter, opacity;
	transition: filter 180ms ease, opacity 120ms ease;
}

#qa-custom-cursor img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 7px rgba(13, 143, 180, 0.4));
	transition: filter 180ms ease;
}

#qa-custom-cursor.is-white img {
	filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.75));
}

#qa-custom-cursor.is-hidden {
	opacity: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
	body.qa-cursor-enabled,
	body.qa-cursor-enabled a,
	body.qa-cursor-enabled button,
	body.qa-cursor-enabled [role="button"] {
		cursor: none;
	}

	body.qa-cursor-enabled :is(input, textarea, select, [contenteditable="true"], .qa-cursor-nativo) {
		cursor: auto;
	}
}

@media (hover: none), (pointer: coarse) {
	#qa-custom-cursor {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#qa-cursor-trail {
		display: none;
	}
}