// ------------------------------------------------------------------------------------------------
// WPBAKERY
// ------------------------------------------------------------------------------------------------

@if $int-wpbakery {

	// ------------------------------------------
	// GENERAL
	// ------------------------------------------

	.vc_welcome {

		[data-post-custom-layout="blank"] {
			display: none;
		}
	}

	// .vc_post-custom-layout-wrapper {
	// 	flex-direction: row-reverse;

	// 	[data-post-custom-layout="blank"] {
	// 		display: none;
	// 	}
	// }

	.vc_ui-panel-content {
		margin-top: 0 !important; // NOTE REMOVE VC WINDOW ALIGN BOTTOM

		.edit_form_line {
			position: static; // NOTE FIX DESIGN OPTIONS RESPONSIVE CONTROLS
		}

		.wpb-param-heading {
			display: flex;
			align-items: center;

			--xts-tooltip-width: 300px;
			// margin-bottom: 10px;
			@extend %option-title;
			@extend %option-title-label;

			.xts-hint {
				z-index: unset;
				margin-inline-start: 5px;

				// .xts-tooltip {

				// 	&:not(:is(.xts-right,.xts-left)) {
				// 		opacity: 0;
				// 		pointer-events: none;
				// 	}
				// }
			}
		}

		.wpb-param-heading {
			@extend %wpb-tooltip;
		}

		.vc_description {
			// color: var(--xts-body-color);
			line-height: inherit;

			@extend %field-description;
		}

		.vc_row {
			display: flex;
			flex-wrap: wrap;
		}

		.vc_column {
			margin-bottom: 20px;
			padding-top: 0 !important;

			// &.vc_col-xs-12,
			// &.vc_col-sm-12 {

			// 	select,
			// 	input[type="text"],
			// 	input[type="number"] {
			// 		min-width: 50%;
			// 		max-width: var(--xts-input-width);
			// 	}
			// }

			&:is(
			.vc_col-sm-12,
			.vc_col-xs-6,
			.vc_col-sm-6) {
				flex-grow: 1;
				width: auto;
			}

			&.vc_col-sm-12 {
				flex-basis: 100%;
			}

			&:is(
			.vc_col-xs-6,
			.vc_col-sm-6) {
				flex-basis: 50%;
			}
		}

		.vc_checkbox-label {
			display: inline-flex;
			align-items: center;
		}

		:is(
		.vc_checkbox,
		.vc_checkbox-label) {
			user-select: none;
		}

		//**** COLOR PICKER ****//

		span.wp-picker-input-wrap {

			label {
				display: inline-block; // NOTE FIX COLOR PICKER PALLETE
				margin-bottom: 0;
			}
		}
	}

	//**** TEMPLATE FORM ****//

	.vc_ui-prompt {

		input[type="text"] {
			--xts-input-width: 100%;
			@extend %input-style;
		}

		.vc_ui-prompt-title {
			@extend %option-title;
			@extend %option-title-label;
			@extend %wpb-tooltip;
		}

		.vc_general.vc_ui-button {
			font-size: 13px;
			padding: 10px 15px;
			height: auto;
		}
	}

	//**** OPTIONS ORDER ****//

	.vc_ui-panel-content {

		.vc_column-order-first {
			order: -1;
		}
	}

	//**** WOODMART SHORTCODE STYLES ****//

	.wpb_edit_form_elements {

		:is(
		input,
		select,
		textarea) {
			@extend %woodmart-input-style;

			&:focus {
				box-shadow: none;
			}
		}

		.vc_column {
			animation: wd-fadeInTooltip .5s ease;
		}
	}

	.wpb_el_type_woodmart_empty_space {
		margin: 0 !important;
		padding: 0 !important;
	}

	.wpb_el_type_woodmart_css_id {
		display: none;

		& + .vc_col-xs-12 {
			padding-top: 0 !important;
		}
	}

	// [data-vc-shortcode="woodmart_responsive_text_block"] {

	// 	[data-tab-index="2"] {
	// 		display: none;
	// 	}
	// }

	// ------------------------------------------
	// VC AUTOCOMPLETE
	// ------------------------------------------

	.wpb_edit_form_elements {

		.vc_autocomplete-field {

			.vc_autocomplete {
				// padding-right: 6px;
				// padding-left: 6px;
				padding-inline: 6px;
				border-color: var(--xts-option-border-color);
				border-radius: var(--xts-option-border-radius);

				li {

					&.vc_data {
						border-color: var(--xts-primary-color);
						border-radius: 3px;
						background-color: var(--xts-primary-color);

						.vc_autocomplete-remove {
							top: 4px !important;
							color: #FFF !important;

							&:hover {
								opacity: .8;
							}
						}
					}
				}

				&:hover {
					border-color: var(--xts-option-border-color-darker-10);
					box-shadow: var(--xts-option-box-shadow);
				}
			}
		}
	}

	.vc_ui-auotocomplete {
		border: 1px solid var(--xts-option-border-color-darker-10);
		border-radius: var(--xts-brd-radius);
		background-color: #FFF;
		box-shadow: var(--xts-box-shadow);

		li {

			a {

				&.ui-state-active {
					border: none !important;
					background: none !important;
				}
			}

			&.vc_autocomplete-group {
				font-weight: 600;
				cursor: default;
			}

			&.vc_autocomplete-item {

				&:hover {
					background-color: var(--xts-primary-color);

					a {
						transition: none;

						&:hover,
						&.ui-state-active {
							color: #FFF !important;
						}
					}
				}
			}
		}
	}

	// ------------------------------------------
	// XTS ELEMENTS TABS
	// ------------------------------------------

	// .vc_panel-tabs {
	// 	transition: opacity .25s ease;
	// }

	.wpb_edit_form_elements {
		transition: opacity .25s ease;

		// &:not(.xts-loaded) {
		// 	min-height: 110px;
				
		// 	> div {
		// 		display: none !important;
		// 		opacity: 0;
		// 		visibility: hidden;
		// 	}

		// 	&:before {
		// 		content: "";
		// 		position: absolute;
		// 		left: 50%;
		// 		top: calc(50% - 16px);
		// 		background-image: url(../../../../../../../plugins/js_composer/assets/vc/loaders/spinner.svg);
		// 		height: 32px;
		// 		width: 32px;
		// 		background-size: contain;
		// 		animation: vc_ui-wp-spinner-animation 1.08s linear infinite;
		// 		opacity: .7;
		// 	}

		// 	// .vc_panel-tabs {
		// 	// 	min-height: 120px;
				
		// 	// 	> div {
		// 	// 		display: none !important;
		// 	// 		opacity: 0;
		// 	// 		visibility: hidden;
		// 	// 	}
	
		// 	// 	&:before {
		// 	// 		content: "";
		// 	// 		position: absolute;
		// 	// 		left: 50%;
		// 	// 		top: 50%;
		// 	// 		background-image: url(../../../../../../../plugins/js_composer/assets/vc/loaders/spinner.svg);
		// 	// 		height: 32px;
		// 	// 		width: 32px;
		// 	// 		background-size: contain;
		// 	// 		animation: vc_ui-wp-spinner-animation 1.08s linear infinite;
		// 	// 		opacity: .7;
		// 	// 	}
		// 	// }
		// }
	}

	.xts-wpb-tab-title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline-start: 24px;

		&:before {
			position: absolute;
			top: calc(50% - 9px);
			inset-inline-start: 0;
			font-size: 18px;

			@include font-icon($xts-icon-logo-xtemos);
		}
	}

	.vc_edit-form-tab-control {

		&.vc_active {

			.xts-wpb-tab-title {

				&:before {
					color: #5E5E5E;
				}
			}
		}
	}

	// ------------------------------------------
	// VC AI BUTTON
	// ------------------------------------------

	.vc_ui-panel-content {

		.vc_ui-icon-ai {
			top: auto;
			bottom: 9px;
			z-index: 1;
			inset-inline-start: auto;
			inset-inline-end: 20px;

			span {
				display: none;
			}
		}
	}

	:is(
	.vc_wrapper-param-type-textarea_html,
	.vc_wrapper-param-type-textfield,
	.wpb_el_type_textarea,) {

		.vc_ui-icon-ai {

			&:not(:hover) {
				opacity: 0;
				visibility: hidden;
			}
		}
	}

	:is(
	.vc_wrapper-param-type-textfield,
	.wpb_el_type_textarea,) {

		&:focus-within {

			.vc_ui-icon-ai {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.vc_wrapper-param-type-textarea_html {

		.vc_ui-icon-ai {
			inset-inline-end: 32px;
			bottom: 30px;
		}

		&:hover,
		&:focus,
		&:focus-within {

			.vc_ui-icon-ai {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.vc_wrapper-param-type-textfield {

		.vc_ui-icon-ai {
			display: none;
			// top: 50px;
			// bottom: auto;
			// inset-inline-start: calc(var(--xts-input-width) - 10px);
			// inset-inline-end: auto;
		}
	}

	// ------------------------------------------
	// WOODMART SELECT
	// ------------------------------------------

	.wd-option-placeholder {
		display: none;
	}

	.wd-select-placeholder {
		color: rgba(0,0,0,.3) !important;

		option {
			color: #2C3338;
		}
	}

	// ------------------------------------------
	// Z-INDEX
	// ------------------------------------------

	.xts-z-index-input {
		display: none;
		max-width: calc(var(--xts-input-width) / 2) !important;
		animation: wd-fadeInTooltip .5s ease;

		&.xts-active {
			display: block;
		}
	}

	// ------------------------------------------
	// GROUP OPTIONS
	// ------------------------------------------

	.woodmart-td-wrapper {
		margin-bottom: 30px;
		width: 100%;

		&:last-child {
			margin-bottom: 20px;
		}
	}

	// .woodmart-td-title {
	// 	color: $woodmart-vc-element-title;
	// 	text-transform: uppercase;
	// 	font-weight: 600;
	// 	font-size: 16px;
	// }

	:is(
	[data-vc-shortcode="woodmart_open_street_map"],
	[data-vc-shortcode="woodmart_google_map"]) {

		.xts-slider-field-value-display {

			.wd-slider-value-preview {
				min-width: 42px;
			}
		}
	}

	.xts-slider-field-value-display {

		.wd-slider-value-preview {
			display: flex;
			align-items: center;
			min-width: 30px;
			height: 30px !important;
			// text-align: right;
			text-align: end;
			line-height: 1;
			direction: rtl;
		}

		.wd-slider-value-preview {
			font-weight: 600;
		}
	}

	.xts-range-field-value-input {

		.wd-slider-value-preview {
			padding: 3px !important;
			max-width: 60px !important;
			width: auto !important;
			height: 30px !important;
		}
	}

	// ------------------------------------------
	// WIDTH
	// ------------------------------------------

	.wpb_el_type_woodmart_slider {

		.xts-slider-units {
			top: -15px;
		}
	}

	// ------------------------------------------
	// ELEMENTS CONTENT
	// ------------------------------------------

	:is(
	.wpb_woodmart_title,
	.wpb_woodmart_text_block,
	.wpb_woodmart_info_box,
	.wpb_woodmart_accordion_item,
	.wpb_promo_banner) {

		// .wpb_element_title {
		// 	position: relative;
		// 	padding-inline-start: 42px;

		// 	i {
		// 		position: absolute;
		// 		inset-inline: 0;
		// 		top: 0;
		// 		margin: 0 !important;
		// 	}
		// }

		// .wpb_element_wrapper {

		// 	> div {
		// 		padding-inline-start: 42px;
		// 	}
		// }
		
		.title {
			font-weight: 500;
			// font-family: var(--wd-title-font);
			color: var(--wd-title-color);

			&:not(:empty) {

				~ .content {

					p {
						margin-top: 0;
					}
				}
			}
		}

		.content {
			color: var(--wd-text-color);

			p {
				margin-bottom: 0;
			}
		}
	}

	// ------------------------------------------
	// ELEMENTOR RELATED OPTIONS HIDDEN IN WPB
	// ------------------------------------------

	// .xts-builder-wpb {

	// 	.xts-negative_gap-field,
	// 	[data-id="plugins_section"] .xts-fields-group:nth-child(4) + .xts-group-title,
	// 	[data-id="plugins_section"] .xts-fields-group:nth-child(4) + .xts-group-title + .xts-fields-group,
	// 	.xts-font_awesome_css-field .xts-status-deprecated,
	// 	.nmi-icon .xts-status-deprecated {
	// 		display: none;
	// 	}
	// }

} // END IF

// ------------------------------------------------------------------------------------------------
// EXTENDS
// ------------------------------------------------------------------------------------------------

// @extend %wpb-tooltip;

%wpb-tooltip {

	svg {
		border: 1px solid var(--xts-hint-color);
		border-radius: 50%;
		width: 16px;
		height: 16px;
		cursor: help;
		box-sizing: border-box;
		// --xts-hint-color: #A0A0A0;

		.info-circle {
			fill: transparent !important;
		}
	}

	.edit-form-info:has(svg) { // #PARTS-HAS
		position: relative;
		--xts-hint-color: #A0A0A0;

		&:before {
			content: "?";
			color: var(--xts-hint-color);
			font-weight: 600;
			font-size: 11px;
			line-height: 1;
			transition: inherit;
			position: absolute;
			left: 12px;
			top: 2px;
			pointer-events: none;
		}

		+ .tooltip-content {
			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);
			font-size: 13px;
			padding: 12px;
			line-height: 1.4;
			cursor: default;
		}
	}
}