/**
 * Ek Custom Mouse — the replacement pointer and its trail canvas.
 */

.ek-cursor {
	position: fixed;
	top: 0;
	left: 0;
	/* The replacement pointer stands in for the real cursor, so nothing on the
	   page may cover it — sticky headers, popups and overlays routinely sit at
	   999999. The trail is one step below, always behind its own pointer. */
	z-index: 2147483647 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-200px, -200px, 0);
	transition: opacity 0.2s ease, width 0.18s ease, height 0.18s ease, background-color 0.18s ease;
	will-change: transform;
}

.ek-cursor.ek-cursor--visible {
	opacity: 1 !important;
}

.ek-cursor--circle {
	border-radius: 50%;
	overflow: hidden;
}

.ek-cursor--icon,
.ek-cursor--svg,
.ek-cursor--image {
	border-radius: 0;
	overflow: visible;
}

.ek-cursor__icon,
.ek-cursor__svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	color: inherit;
}

/* The pointer's font-size is the Size setting, so the glyph scales with it. */
.ek-cursor__icon i {
	font-size: 1em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.ek-cursor__icon img,
.ek-cursor__svg svg {
	width: 100%;
	height: 100%;
	/* fill="currentColor" in the pasted SVG follows the colour picker. */
	fill: currentColor;
}

.ek-cursor__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ek-cursor-trail {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483646;
	pointer-events: none;
}

/*
 * The browser cursor follows the chosen keyword — `none` while a custom pointer
 * is drawn, or whatever the Default type asks for.
 */
.ek-cursor-native,
.ek-cursor-native body,
.ek-cursor-native a,
.ek-cursor-native button,
.ek-cursor-native [role="button"],
.ek-cursor-native input,
.ek-cursor-native textarea,
.ek-cursor-native select {
	cursor: var(--ek-cursor-native, auto);
}

@media (hover: none), (pointer: coarse) {
	.ek-cursor,
	.ek-cursor-trail {
		display: none;
	}

	.ek-cursor-native,
	.ek-cursor-native body,
	.ek-cursor-native a,
	.ek-cursor-native button,
	.ek-cursor-native [role="button"],
	.ek-cursor-native input,
	.ek-cursor-native textarea,
	.ek-cursor-native select {
		cursor: auto;
	}
}