@import "../../css/_mixins.scss";
@import "../../css/_trx_addons.vars.scss";
@import "../../css/_trx_addons.colors.scss";

/* Mouse helper
--------------------------------------------------------------- */
.trx_addons_mouse_helper {
	--mouse-helper-width: 15px;
	--mouse-helper-height: 15px;
	--mouse-helper-left: 5px;
	--mouse-helper-top: 25px;

	@include fixed-lt(var(--mouse-helper-left), var(--mouse-helper-top), 999999);
	@include box(var(--mouse-helper-width), var(--mouse-helper-height));
	@include border-round;
	@include border-box;
	@include transition-properties(left,top,width,height,opacity,color,background-color);
	@include flex;
	@include flex-direction(column);
	@include flex-justify-content(center);
	@include flex-align-items(center);
	overflow: hidden;
	font-size: 0.75em;
	text-indent: 200px;
	line-height: 1.25em;
	text-align: center;
	color: #fff;
	background-color: $accent_color;
	border: 1px solid transparent;
	opacity: 0;
	pointer-events: none;
	will-change: left, top, width, height;

// Test blend mode
//------------------ 
//	mix-blend-mode: difference;
//	background-color: #fff !important;
//	opacity: 1 !important;
//------------------

	&.trx_addons_mouse_helper_abrupt {
		@include transition-none;
	}
	&.trx_addons_mouse_helper_hide {
		opacity: 0 !important;
	}

	&.trx_addons_mouse_helper_permanent {
		opacity: 0.5;
	}

	&.trx_addons_mouse_helper_centered {
		left: calc( var(--mouse-helper-width) / -2 );
		top: calc( var(--mouse-helper-height) / -2 );
	}

	&.trx_addons_mouse_helper_left:not(.trx_addons_mouse_helper_centered) {
		left: calc( var(--mouse-helper-width) * -1 - 15px );
	}
	&.trx_addons_mouse_helper_top:not(.trx_addons_mouse_helper_centered) {
		top: calc( var(--mouse-helper-height) * -1 - 15px );
	}

	.trx_addons_mouse_helper_icon {
		font-size: 3em;
	}
	&.trx_addons_mouse_helper_with_text .trx_addons_mouse_helper_icon {
		margin-bottom: 0.25em;
		font-size: 1.5em;
	}
	&.trx_addons_mouse_helper_with_text_round .trx_addons_mouse_helper_icon {
		margin-bottom: 0;
	}

	.trx_addons_mouse_helper_text_round {
		@include abs-cover;
		
		body:not(.rtl) & {
			@include animation(spin-ccw 8s infinite linear);
		}
		body.rtl & {
			@include animation(spin 8s infinite linear);
		}

		.trx_addons_mouse_helper_text_round_item {
			@include abs-lt;
			@include transform-origin(left top);
			line-height: 1.25em;
		}
		body.rtl & .trx_addons_mouse_helper_text_round_item {
			left:  auto;
			right:  0;
			@include transform-origin(right top);
		}
	}

	.trx_addons_mouse_helper_image {
		@include abs-cover(-1);
		background-size: cover;
	}

	&.trx_addons_mouse_helper_active {
		--mouse-helper-width: 25px;
		--mouse-helper-height: 25px;

		color: #fff;
		opacity: 1;
		text-indent: 0;
		//mix-blend-mode: difference;

		&.trx_addons_mouse_helper_action_highlight {
			display:none;
		}

		&.trx_addons_mouse_helper_with_icon {
			--mouse-helper-width: 50px;
			--mouse-helper-height: 50px;

			padding: 5px;
		}

		&.trx_addons_mouse_helper_with_text {
			--mouse-helper-width: 75px;
			--mouse-helper-height: 75px;

			padding: 5px;
		}

		&.trx_addons_mouse_helper_with_image {
			--mouse-helper-width: 128px;
			--mouse-helper-height: 128px;	//72px;

			@include border-sharp;

			&.trx_addons_mouse_helper_with_text {
				--mouse-helper-width: 160px;
				--mouse-helper-height: 160px;	//90px;

				.trx_addons_mouse_helper_image:before {
					content: ' ';
					@include bg-mask( #000, 0.3, -1);
				}
			}
		}
	}
}


/* Style Dot */
.trx_addons_mouse_helper_style_dot {
	--mouse-helper-width: 15px;
	--mouse-helper-height: 15px;

	&.trx_addons_mouse_helper_active {
		--mouse-helper-width: 34px;
		--mouse-helper-height: 34px;
	}
}



/* Style Pointer */
.trx_addons_mouse_helper_style_pointer {
	--mouse-helper-width: 9px;
	--mouse-helper-height: 9px;

	&.trx_addons_mouse_helper_active {
		--mouse-helper-width: 13px;
		--mouse-helper-height: 13px;
	}

	&,
	&.trx_addons_mouse_helper_active {
		background-color: $text_light;
		color: #fff;
	}

	&.trx_addons_mouse_helper_outer {
		--mouse-helper-width: 35px;
		--mouse-helper-height: 35px;

		background-color: transparent !important;
		border: 1px solid $text_light;

		&.trx_addons_mouse_helper_active {
			--mouse-helper-width: 45px;
			--mouse-helper-height: 45px;
		}
	}

	&.trx_addons_mouse_helper_over_link {
		--mouse-helper-width: 11px;
		--mouse-helper-height: 11px;

		&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
			background-color: $accent_color !important;
		}
		&.trx_addons_mouse_helper_outer {
			--mouse-helper-width: 27px;
			--mouse-helper-height: 27px;
			border-color: $accent_color !important;
		}
	}

	&.trx_addons_mouse_helper_with_icon,
	&.trx_addons_mouse_helper_with_text,
	&.trx_addons_mouse_helper_text_round,
	&.trx_addons_mouse_helper_with_image,
	&.trx_addons_mouse_helper_with_layout {
		& ~ .trx_addons_mouse_helper_outer {
			opacity: 0;
		}
	}
}


/* Style Aim */
.trx_addons_mouse_helper_style_aim {
	--aim-size: 17px;
	overflow: visible;

	&.trx_addons_mouse_helper_reset {
		overflow: hidden;
	}

	&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
		--mouse-helper-width: 3px;
		--mouse-helper-height: 3px;

		&.trx_addons_mouse_helper_active,
		&.trx_addons_mouse_helper_over_link {
			--mouse-helper-width: 5px;
			--mouse-helper-height: 5px;
		}
	}

	&,
	&.trx_addons_mouse_helper_active {
		background-color: $text_light;
		color: #fff;
	}

	&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
		&:before,
		&:after {
			content: ' ';
			display: block;
			position: absolute;
			background-color: inherit;
			@include transition-property(background-color);
		}
		&:before {
			left: calc( ( var(--mouse-helper-width) - 1 ) / 2 );
			top: calc( ( var(--mouse-helper-height ) - var(--aim-size) - 1 ) / 2 );
			@include box(1px, var(--aim-size));
		}
		&:after {
			left: calc( ( var(--mouse-helper-width) - var(--aim-size) - 1 ) / 2 );
			top: calc( ( var(--mouse-helper-height ) - 1 ) / 2 );
			@include box(var(--aim-size), 1px);
		}
	}

	&.trx_addons_mouse_helper_outer {
		--mouse-helper-width: 35px;
		--mouse-helper-height: 35px;

		background-color: transparent !important;
		border: 1px solid $text_light;

		&.trx_addons_mouse_helper_active {
			--mouse-helper-width: 45px;
			--mouse-helper-height: 45px;
		}
	}

	&.trx_addons_mouse_helper_over_link {
		--aim-size: 13px;

		&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
			background-color: $accent_color !important;
		}
		&.trx_addons_mouse_helper_outer {
			--mouse-helper-width: 27px;
			--mouse-helper-height: 27px;
			border-color: $accent_color !important;
		}
	}

	&.trx_addons_mouse_helper_with_icon,
	&.trx_addons_mouse_helper_with_text,
	&.trx_addons_mouse_helper_text_round,
	&.trx_addons_mouse_helper_with_image,
	&.trx_addons_mouse_helper_with_layout {
		& ~ .trx_addons_mouse_helper_outer {
			opacity: 0;
		}
	}
}


/* Hightlight for Title and Heading */
[data-mouse-helper="highlight"] {
	color: hsla(0,0%,100%,.25);
	@include transition( color .7s cubic-bezier(.19,1,.22,1) );
	-webkit-background-clip: text;
	background-image: radial-gradient(closest-side, #fff 78%, transparent 0);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 0 0;

	&.trx_addons_mouse_helper_over {
		background-size: 5em 5em;
	}
	&.sc_item_title_style_shadow {
		position: relative;
		z-index: 1;
	}
	&.sc_item_title_style_gradient .sc_item_title_text {
		opacity: 0.75;
	}
}


/* Mouse helper in the Elementor editor */
body.elementor-editor-active .trx_addons_mouse_helper {
	display: none !important;
}


/* Hide system cursor */
[data-mouse-helper-hide-cursor="1"],
[data-mouse-helper-hide-cursor="1"] * {
	cursor: none !important;
}
