@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.5em;
	text-align: center;
	color: #fff;
	background-color: $accent_color;
	border: 1px solid transparent;
	opacity: 0;
	pointer-events: none;

	&.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_text_round {
		@include abs-cover;
		@include animation(spin-ccw 8s infinite linear);

		.trx_addons_mouse_helper_text_round_item {
			@include abs-lt;
			@include transform-origin(left 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: 72px;

			@include border-sharp;

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

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


/* 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 */
.elementor-editor-active .trx_addons_mouse_helper {
	display: none !important;
}


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