// ------------------------------------------------------------------------------------------------
// TOOLTIP
// ------------------------------------------------------------------------------------------------

@if $general {

	.xts-tooltip {
		position: absolute;
		z-index: $z-layer-10;
		visibility: hidden;
		padding: 12px;
		width: var(--xts-tooltip-width);
		border: 1px solid var(--xts-option-border-color-darker-10);
		border-radius: var(--xts-option-border-radius);
		background-color: #FFF;
		box-shadow: var(--xts-option-box-shadow);
		color: var(--xts-body-color);
		white-space: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.4;
		opacity: 0;
		cursor: auto;
		transition: all .2s ease;

		&:after {
			content: "";
			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
			background-color: inherit;
			transform: translateY(-50%) rotate(-45deg);
		}

		img {
			display: block;
			margin: 0 auto;
			// border: 1px solid #F1F1F1;
			border-radius: var(--xts-option-border-radius);

			image-rendering: -webkit-optimize-contrast;

			&:not(:last-child) {
				margin-bottom: 10px;
			}
		}

		&:before {
			content: "";
			position: absolute;
		}

		&.xts-top {
			bottom: calc(100% + var(--xts-tooltip-sp));
			inset-inline-start: -10px;

			&:before {
				top: 100%;
				inset-inline-start: 0;
				width: 100%;
				height: var(--xts-tooltip-sp);
			}

			&:after {
				top: 100%;
				inset-inline-start: 10px;
				border-bottom: 1px solid var(--xts-option-border-color-darker-10);
				border-left: 1px solid var(--xts-option-border-color-darker-10);
			}
		}

		// &.xts-bottom {
		// 	top: calc(100% + var(--xts-tooltip-sp));
		// 	left: -10px;

		// 	&:before {
		// 		bottom: 100%;
		// 		left: 0;
		// 		width: 100%;
		// 		height: var(--xts-tooltip-sp);
		// 	}

		// 	&:after {
		// 		top: 100%;
		// 		bottom: 100%;
		// 		left: 10px;
		// 		left: 10px;
		// 		border-top: 1px solid var(--xts-option-border-color-darker-10);
		// 		border-right: 1px solid var(--xts-option-border-color-darker-10);
		// 	}
		// }

		&.xts-left {
			top: -10px;
			right: calc(100% + var(--xts-tooltip-sp));

			&:before {
				top: 0;
				left: 100%;
				width: var(--xts-tooltip-sp);
				height: 100%;
			}

			&:after {
				top: 18px;
				right: -6px;
				border-right: 1px solid var(--xts-option-border-color-darker-10);
				border-bottom: 1px solid var(--xts-option-border-color-darker-10);
			}

			.rtl .xts-tooltip-mirror & {
				right: auto;
				left: calc(100% + var(--xts-tooltip-sp));

				&:before {
					right: 100%;
					left: auto;
				}

				&:after {
					right: auto;
					left: -6px;
					border-top: 1px solid var(--xts-option-border-color-darker-10);
					border-right: none;
					border-bottom: none;
					border-left: 1px solid var(--xts-option-border-color-darker-10);
				}
			}
		}

		&.xts-right {
			top: -10px;
			left: calc(100% + var(--xts-tooltip-sp));

			&:before {
				top: 0;
				right: 100%;
				width: var(--xts-tooltip-sp);
				height: 100%;
			}

			&:after {
				top: 18px;
				left: -6px;
				border-top: 1px solid var(--xts-option-border-color-darker-10);
				border-left: 1px solid var(--xts-option-border-color-darker-10);
			}

			.rtl .xts-tooltip-mirror & {
				right: calc(100% + var(--xts-tooltip-sp));
				left: auto;

				&:before {
					right: auto;
					left: 100%;
				}

				&:after {
					right: -6px;
					left: auto;
					border-top: none;
					border-right: 1px solid var(--xts-option-border-color-darker-10);
					border-bottom: 1px solid var(--xts-option-border-color-darker-10);
					border-left: none;
				}
			}
		}

		// &.xts-left {
		// 	top: -10px;
		// 	right: calc(100% + var(--xts-tooltip-sp));

		// 	&:before {
		// 		top: 0;
		// 		left: 100%;
		// 		width: var(--xts-tooltip-sp);
		// 		height: 100%;
		// 	}

		// 	&:after {
		// 		top: 18px;
		// 		right: -6px;
		// 		border-right: 1px solid var(--xts-option-border-color-darker-10);
		// 		border-bottom: 1px solid var(--xts-option-border-color-darker-10);
		// 	}
		// }

		// &.xts-right {
		// 	top: -10px;
		// 	left: calc(100% + var(--xts-tooltip-sp));

		// 	&:before {
		// 		top: 0;
		// 		right: 100%;
		// 		width: var(--xts-tooltip-sp);
		// 		height: 100%;
		// 	}

		// 	&:after {
		// 		top: 18px;
		// 		left: -6px;
		// 		border-top: 1px solid var(--xts-option-border-color-darker-10);
		// 		border-left: 1px solid var(--xts-option-border-color-darker-10);
		// 	}
		// }
	}

	// ------------------------------------------
	// HOVER
	// ------------------------------------------

	:is(
	label,
	span,
	div,
	a) {

		&:hover {

			> .xts-tooltip {
				visibility: visible;
				opacity: 1;
			}
		}
	}

	// ------------------------------------------
	// LAZY LOADING
	// ------------------------------------------

	.xts-theme-style {

		.xts-hint {

			img {
				min-height: 150px;
				width: 100%;
			}
		}
	}

	// ------------------------------------------
	// HELPERS
	// ------------------------------------------

	.xts-tooltip-bordered {

		.xts-tooltip {

			img {
				border: 1px solid #F1F1F1;
			}
		}
	}

	// ------------------------------------------------------------------------------------------------
	// WPB TOOLTIP
	// ------------------------------------------------------------------------------------------------

	.vc_panel-tabs {

		.xts-hint {

			.xts-tooltip {
				transition: opacity .2s ease;
				transition-delay: .2s;
			}
		}
	}

	// ------------------------------------------------------------------------------------------------
	// WHB TOOLTIP
	// ------------------------------------------------------------------------------------------------

	.whb-header-builder {

		.__react_component_tooltip {

			&.place-top {
				border: 1px solid var(--xts-option-border-color-darker-10) !important;
				border-radius: var(--xts-option-border-radius) !important;
				background-color: #FFF !important;
				box-shadow: var(--xts-option-box-shadow) !important;
				color: var(--xts-body-color) !important;
				opacity: 1;

				&:after {
					content: "";
					position: absolute;
					top: 100%;
					left: calc(50% - 5px) !important;
					display: block;
					margin: 0 !important;
					width: 10px;
					height: 10px;
					border: none !important;
					border-bottom: 1px solid var(--xts-option-border-color-darker-10) !important;
					border-left: 1px solid var(--xts-option-border-color-darker-10) !important;
					background-color: inherit;
					transform: translateY(-50%) rotate(-45deg);
				}
			}
		}
	}

	// ------------------------------------------
	// OTHER (OPTION) TOOLTIPS
	// ------------------------------------------

	.woodmart-css-tooltip {

		img {
			vertical-align: middle;
		}
	}

	.woodmart-tltp {
		position: relative;

		&:hover {

			.woodmart-tooltip-label {
				visibility: visible;
				opacity: 1;
				-webkit-animation: wd-fadeInTooltip .3s ease;
				animation: wd-fadeInTooltip .3s ease;
			}
		}
	}

	.woodmart-tooltip-label {
		position: absolute;
		bottom: 100%;
		inset-inline-start: 50%;
		z-index: 2;
		visibility: hidden;
		margin-bottom: 8px;
		padding: 0 15px;
		height: 34px;
		border: 1px solid var(--xts-option-border-color-darker-10);
		border-radius: var(--xts-option-border-radius);
		background-color: #FFF;
		box-shadow: var(--xts-option-box-shadow);
		color: var(--xts-body-color);
		text-align: center;
		text-transform: capitalize;
		white-space: nowrap;
		font-size: 14px;
		line-height: 34px;
		opacity: 0;
		pointer-events: none;

		&:before {
			content: "";
			position: absolute;
			top: 100%;
			inset-inline-start: calc(50% - 5px);
			display: block;
			width: 10px;
			height: 10px;
			border-bottom: 1px solid var(--xts-option-border-color-darker-10);
			border-left: 1px solid var(--xts-option-border-color-darker-10);
			background-color: inherit;
			transform: translateY(-50%) rotate(-45deg);
		}
	}

} // END IF

// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------

@mixin R-LG-DOWN__modules__tooltip {

	@if $general {

		:root {
			--xts-tooltip-width: 340px;
		}

	} // END IF
}