/* The class is added only after pointer capability is confirmed in JavaScript. */
html.ecs-cursor-active.ecs-hide-native,
html.ecs-cursor-active.ecs-hide-native body,
html.ecs-cursor-active.ecs-hide-native a,
html.ecs-cursor-active.ecs-hide-native button,
html.ecs-cursor-active.ecs-hide-native input,
html.ecs-cursor-active.ecs-hide-native select,
html.ecs-cursor-active.ecs-hide-native textarea,
html.ecs-cursor-active.ecs-hide-native [role="button"] {
	cursor: none !important;
}

.ecs-cursor {
	--ecs-size: 18px;
	--ecs-color: #111;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--ecs-size);
	height: var(--ecs-size);
	z-index: 2147483646;
	pointer-events: none;
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
	transition: width .18s ease, height .18s ease, opacity .2s ease;
	will-change: transform;
	opacity: 0;
}

.ecs-cursor.is-visible { opacity: 1; }
.ecs-cursor.shape-none { opacity: 0 !important; }

.ecs-cursor::before,
.ecs-cursor::after {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
}

.ecs-cursor.shape-dot::before { background: var(--ecs-color); border-radius: 50%; }
.ecs-cursor.shape-ring::before { border: max(2px, calc(var(--ecs-size) / 12)) solid var(--ecs-color); border-radius: 50%; }
.ecs-cursor.shape-square::before { background: var(--ecs-color); border-radius: 12%; }
.ecs-cursor.shape-diamond::before { background: var(--ecs-color); transform: rotate(45deg) scale(.72); border-radius: 8%; }
.ecs-cursor.shape-arrow::before {
	background: var(--ecs-color);
	clip-path: polygon(0 0, 0 82%, 23% 61%, 39% 100%, 55% 93%, 38% 55%, 70% 55%);
}
.ecs-cursor.shape-crosshair::before { top: 48%; height: 2px; background: var(--ecs-color); }
.ecs-cursor.shape-crosshair::after { left: 48%; width: 2px; background: var(--ecs-color); }

.ecs-trail-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ecs-trail-color, #111);
	pointer-events: none;
	z-index: 2147483645;
	opacity: var(--ecs-trail-opacity, .35);
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
	will-change: transform;
}

.ecs-click-ripple {
	position: fixed;
	width: 12px;
	height: 12px;
	border: 2px solid var(--ecs-ripple-color, #111);
	border-radius: 50%;
	pointer-events: none;
	z-index: 2147483644;
	transform: translate(-50%, -50%) scale(.4);
	animation: ecs-ripple .55s ease-out forwards;
}

@keyframes ecs-ripple {
	to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

@media (hover: none), (pointer: coarse) {
	.ecs-cursor, .ecs-trail-dot, .ecs-click-ripple { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ecs-cursor { transition: none; }
	.ecs-trail-dot, .ecs-click-ripple { display: none !important; }
}