// ------------------------------------------------------------------------------------
// XTS POPUP
// ------------------------------------------------------------------------------------

@if $general {

	.xts-popup {
		position: fixed;
		top: 32px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
		padding: 15px;
		opacity: 0;
		// transform: scale(.8);
		pointer-events: none;
	}

	.xts-popup-inner {
		// margin: auto;
		position: relative;
		overflow: hidden;
		max-width: 650px;
		max-height: 90vh;
		width: 100%;
		// opacity: 0;
		border-radius: var(--xts-option-border-radius);
		background-color: #FFF;
		box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
		pointer-events: auto;
	}

	.xts-popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// box-sizing: border-box;
		padding: 20px;
		height: 70px;
		border-bottom: 1px solid var(--xts-option-border-color);
		// border-bottom: 1px solid #573C3C;
		// background: #222;
		// color: #FFF;
		font-size: 16px;
	}

	.xts-popup-title {
		color: var(--xts-heading-color);
		font-weight: 600;
		font-size: 18px;
	}

	:is(
	.xts-popup-content,
	.xts-popup-content-inn) {
		overflow-x: hidden;
		overflow-y: auto;
		padding: 20px;
		max-height: 60vh;
		overscroll-behavior: none; // NOTE FOR FRONTEND EDITOR

		@include xts-bg-loader;

		.xts-loading & {
			@include xts-act-bg-loader;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-track {
			background-color: rgba(#000,.05);
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(#000,.12);
		}

		.xts-field {
			margin-bottom: 20px;

			// &:last-child {
			// 	margin-bottom: 0;
			// }
		}
	}

	// @media not all and (min-resolution:.001dpcm) {

		// .xts-popup-content {
		// 	margin-right: calc(-50vw + 325px);
		// 	// border-right: calc(50vw - 325px) solid transparent;

		// 	// &::-webkit-scrollbar {
		// 	// 	width: calc(50vw - 325px);
		// 	// }
		// }
	// }

	.xts-popup-actions {
		margin: 0;
		padding: 20px;
		border-top: 1px solid var(--xts-option-border-color);

		&:empty {
			display: none;
		}
	}

	.xts-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		// z-index: 1400;
		z-index: 9998;
		visibility: hidden;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .54);
		opacity: 0;
		backdrop-filter: blur(1px);
		-webkit-backdrop-filter: blur(1px);
	}

	.xts-popup-close {
		position: absolute;
		top: 0;
		inset-inline-end: 0;
		z-index: 21;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
		outline: none !important;
		box-shadow: none !important;
		color: var(--xts-heading-color);
		text-decoration: none;
		font-size: 0;
		cursor: pointer;
		transition: .3s all ease-in-out !important; // NOTE OVERWRIGHT WP TRANSITION

		&:before {
			font-size: 20px;
			line-height: 70px;
		}

		.xts-loading & {
			opacity: .6;
			pointer-events: none;
		}

		&:hover {
			color: var(--xts-heading-color);
			opacity: .7;
		}
	}


	.xts-popup-holder {

		&.xts-opened {

			:is(
			.xts-popup,
			.xts-popup-overlay) {
				visibility: visible;
				opacity: 1;
				transition: all .2s ease-in-out;
			}
		}
	}

	.whb-header-builder {

		.xts-popup-holder {

			:is(
			.whb-popup-overlay,
			.xts-popup) {
				animation: wd-fadeIn .2s ease-in-out;
			}
		}
	}

	// ------------------------------------------------------------------------------------
	// XTS TOOLTIPS
	// ------------------------------------------------------------------------------------

	// .xts-popup {

	// 	.xts-field { // NOTE TOOLTIP FIX

	// 		.xts-hint {
	// 			position: static;
	// 		}
	
	// 		&:hover {
	// 			z-index: 10;
	// 		}
	// 	}

	// 	.xts-tooltip {

	// 		:is(
	// 		img,
	// 		video) {
	// 			max-height: calc(100vh - 60px);
	// 			// min-height: 200px;
	// 		}

	// 		&.xts-right {
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;
	// 			position: fixed;
	// 			top: calc(50% + 16px);
	// 			inset-inline-start: calc(50% + 350px);
	// 			bottom: auto;
	// 			inset-inline-end: auto;
	// 			transform: translate(0, -50%);
	// 			// width: calc((100vw - 750px) / 2);
	// 			width: #{"min(var(--xts-tooltip-width), calc((100vw - 750px) / 2))"};
	// 			min-height: #{"min(308px, 17.5vw)"};

	// 			&:after {
	// 				top: calc(50% - 5px);
	// 			}
	// 		}
	// 	}

	// 	.rtl & {

	// 		.xts-tooltip {
	
	// 			&.xts-right {

	// 				&:after {
	// 					left: auto;
	// 					right: -6px;
	// 					transform: rotate(135deg);
	// 				}
	// 			}
	// 		}
	// 	}

	// 	// .xts-tooltip.xts-top {
	// 	// 	inset-inline-start: 0;
	// 	// 	// max-width: 150%;
	// 	// 	// width: min(150%, var(--xts-tooltip-width));
	// 	// 	width: #{"min(121%, var(--xts-tooltip-width))"};
	// 	// 	--xts-tooltip-sp: 10px !important; 
	// 	// }
	
	// 	// .xts-gallery_video_size-field {
	
	// 	// 	.xts-tooltip.xts-top {
	// 	// 		inset-inline-start: auto;
	// 	// 		inset-inline-end: 0;
	
	// 	// 		&:after {
	// 	// 			inset-inline-start: auto;
	// 	// 			inset-inline-end: 10px;
	// 	// 		}
	// 	// 	}
	// 	// }
	// }

	// .whb-popup {

	// 	.xts-tooltip {
	// 		animation: wd-fadeIn .4s ease both;
	// 	}
	// }

	// ------------------------------------------------------------------------------------
	// XTS POPUP
	// ------------------------------------------------------------------------------------

	.xts-popup-opened {

		body {
			overflow: hidden;
		}

		&:not([dir="rtl"]) {

			body {
				padding-right: 15px;
			}
		}
	}

	// ------------------------------------------------------------------------------------
	// WHB POPUP
	// ------------------------------------------------------------------------------------

	.whb-inline-checkbox {
		margin-top: var(--xts-option-space);

		label {
			margin-bottom: 0 !important;
			padding: 0 !important;
			border-bottom: 0 !important;
			font-weight: 400 !important;
		}

		[type="checkbox"] {
			margin-inline-start: 4px !important;
		}
	}

	// ------------------------------------------------------------------------------------
	// XTS ABSOLUYE TOOLTIP
	// ------------------------------------------------------------------------------------

	.xts-hint-wrapper {
		position: fixed;
		pointer-events: none;
		z-index: 99999;

		.xts-tooltip {
			visibility: visible;
			opacity: 1;
			pointer-events: none;
			animation: wd-fadeIn .3s ease both;
			min-height: 308px;

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

			&.xts-bottom {
				transform: translateY(15px);
			}
		}
	}

	.rtl {

		> .xts-hint-wrapper {

			.xts-tooltip {
				transform: translateX(15px);

				&.xts-bottom {
					transform: translate(15px, 15px);
				}
			}
		}
	}

} // END IF