// ------------------------------------------------------------------------------------
// DRIVER
// ------------------------------------------------------------------------------------

@if $lib-driver {

	@keyframes shake-horizontal {
		0%, 100% {
		  transform: translateX(0);
		}
		10%, 30%, 50%, 70%, 90% {
		  transform: translateX(-6px);
		}
		20%, 40%, 60%, 80% {
		  transform: translateX(6px);
		}
	}

	@keyframes pulse-shadow {
		0% {
			box-shadow: 0 0 0px 0 rgba(var(--xts-primary-color--rgb), .2) !important;
		}
		50% {
			box-shadow: 0 0 8px 4px rgba(var(--xts-primary-color--rgb), .4) !important;
		}
		100% {
			box-shadow: 0 0 0px 0 rgba(var(--xts-primary-color--rgb), .2) !important;
		}
	}

	@keyframes animate-fade-in {

		0% {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.driver-active {

		.driver-overlay,
		* {
			pointer-events: none;
		}

		.driver-active-element {
			pointer-events: auto;
			user-select: none;
	  
			* {
				pointer-events: auto;
			}
		}
	}

	.driver-popover {
		pointer-events: auto;

		* {
			pointer-events: auto;
		}
	}

	.driver-fade {

		.driver-overlay {
			animation: animate-fade-in .2s ease-in-out;
		}

		.driver-popover {
			animation: animate-fade-in .2s;
		}
	}

	.driver-popover {
		all: unset;
		box-sizing: border-box;
		color: #2d2d2d;
		margin: 0;
		padding: 15px;
		border-radius: 5px;
		min-width: 250px;
		max-width: 300px;
		box-shadow: 0 1px 10px #0006;
		z-index: 1000000000;
		position: fixed;
		top: 0;
		right: 0;
		background-color: #fff;
		// user-select: all;

		* {
			// font-family: Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		}
	}

	.driver-popover-title {
		// font: 19px/normal sans-serif;
		font-size: 19px;
		font-weight: 600;
		display: block;
		position: relative;
		line-height: 1.5;
		zoom: 1;
		margin: 0;
	}

	.driver-popover-close-btn {
		all: unset;
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 28px;
		cursor: pointer;
		font-size: 18px;
		font-weight: 500;
		color: #d2d2d2;
		z-index: 1;
		text-align: center;
		transition: color;
		transition-duration: .2s;

		&:hover,
		&:focus {
			color: #2d2d2d;
		}
	}

	.driver-popover-title[style*=block] {

		+ .driver-popover-description {
			margin-top: 5px;
		}
	}

	.driver-popover-description {
		margin-bottom: 0;
		font: 14px/normal sans-serif;
		line-height: 1.5;
		font-weight: 400;
		zoom: 1;

		ul {
			list-style: disc;
			padding-inline-start: 17px;
		}
	}

	.driver-popover-footer {
		margin-top: 10px;
		text-align: right;
		zoom: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		button {
			// all: unset;
			// display: inline-block;
			// box-sizing: border-box;
			// padding: 3px 7px;
			// text-decoration: none;
			// text-shadow: 1px 1px 0 #fff;
			// background-color: #fff;
			// color: #2d2d2d;
			// font: 12px/normal sans-serif;
			// cursor: pointer;
			// outline: 0;
			// zoom: 1;
			// line-height: 1.3;
			// border: 1px solid #ccc;
			// border-radius: 3px;
			border-radius: var(--xts-option-border-radius);
			min-height: 35px !important;
			text-transform: none !important;
			@extend %xts-button;
		}

		.driver-popover-next-btn {
			@extend %xts-button-primary;
			@extend %xts-button-primary-hover;
			animation: pulse-shadow 1.5s infinite ease-in-out;
		}

		.driver-popover-prev-btn {
			@extend %xts-inline-button;
			// @extend %xts-inline-button-primary;
			color: var(--xts-primary-color) !important;

			&:focus {
				opacity: 1;
			}
		}

		.driver-popover-btn-disabled {
			opacity: .5;
			pointer-events: none;
		}
	}

	.driver-popover-progress-text {
		font-size: 13px;
		font-weight: 400;
		color: #727272;
		zoom: 1;
	}

	// :not(body):has(> .driver-active-element) {
	// 	overflow: hidden !important;
	// }

	.driver-no-interaction {
		pointer-events: none !important;

		* {
			pointer-events: none !important;
		}
	}

	// .driver-popover-footer {

	// 	button {

	// 		&:hover,
	// 		&:focus {
	// 			background-color: #f7f7f7;
	// 		}
	// 	}
	// }

	.driver-popover-navigation-btns {
		display: flex;
		flex-grow: 1;
		justify-content: flex-end;
	
		button + button {
			margin-left: 4px;
		}
	}

	.driver-popover-arrow {
		content: "";
		position: absolute;
		border: 5px solid #fff;
	}

	.driver-popover-arrow-side-over {
		display: none;
	}
	
	.driver-popover-arrow-side-left {
		left: 100%;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-top-color: transparent;
	}

	.driver-popover-arrow-side-right {
		right: 100%;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-top-color: transparent;
	}

	.driver-popover-arrow-side-top {
		top: 100%;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	
	.driver-popover-arrow-side-bottom {
		bottom: 100%;
		border-left-color: transparent;
		border-top-color: transparent;
		border-right-color: transparent;
	}

	.driver-popover-arrow-side-center {
		display: none;
	}
	
	.driver-popover-arrow-side-left.driver-popover-arrow-align-start, .driver-popover-arrow-side-right.driver-popover-arrow-align-start {
		top: 15px;
	}
	
	.driver-popover-arrow-side-top.driver-popover-arrow-align-start, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
		left: 15px;
	}
	
	.driver-popover-arrow-align-end {

		&.driver-popover-arrow-side-left,
		&.driver-popover-arrow-side-right {
			bottom: 15px;
		}
	}
	
	.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
	.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
		right: 15px;
	}
	
	.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
	.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
		top: 50%;
		margin-top: -5px;
	}
	
	.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
	.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
		left: 50%;
		margin-left: -5px;
	}

	.driver-popover-arrow-none {
		display: none;
	}

	// ------------------------------------------------------------------------------------------------
	// THEME CUSTOM
	// ------------------------------------------------------------------------------------------------

	.driver-active {
		// user-select: none;

		&:active {

			.driver-popover-next-btn {
				animation: shake-horizontal .4s ease-in-out;
			}
		}

		&:has(.xts-tour-navigation:active) {

			.driver-popover-next-btn {
				animation: none !important;
			}
		}
	}

	.driver-popover {
		// user-select: text;

		&.xts-step-optional {
			
			.driver-popover-next-btn {
				animation: none !important;
			}
		}

		&:active {

			.driver-popover-next-btn {
				animation: none !important;
			}
		}
	}

	.driver-overlay {
		z-index: 99999 !important;
	}

	// ------------------------------------------------------------------------------------------------
	// GUIDE CUSTOM
	// ------------------------------------------------------------------------------------------------

	.driver-active {

		#wpbody-content {

			> .wrap {

				> .notice,
				> .wpb-notice {
					display: none !important;
				}
			}
		}

		#whb-header-builder {
			animation: none !important;
		}

		.components-modal__screen-overlay {
			display: none !important; // NOTE REMOVE GUTENBERG GUIDE MODAL
		}
	}

	.driver-active-element {
		// pointer-events: none !important;

		&.whb-element-content {
			pointer-events: none !important;
		}

		> .whb-element-inner {
			margin-top: 28px;
			cursor: default !important;
			pointer-events: none !important;
			background-color: var(--xts-bg-color);
		}

		> .whb-element-actions {
			display: flex;
			visibility: visible;
			opacity: 1;
			margin-bottom: -25px;
			transition: none;

			.whb-edit-btn {
				animation: pulse-shadow 1.5s infinite ease-in-out;
				width: 20px;
				border: 1px solid var(--xts-primary-color);
				border-radius: 3px;
				pointer-events: auto;
			}

			.whb-clone-btn,
			.whb-remove-btn {
				pointer-events: none;
			}
		}
	}

	// .driver-active {

	// 	.xts-header {

	// 		.xts-dropdown {
	// 			display: none;
	// 		}
	// 	}
	// }

	//**** WOODMART DASHBOARD MENU ****//

	.driver-active-element {

		&.xts-nav-link {

			+ .xts-dropdown {
				display: none;
			}
		}
	}

	//**** SELECT 2 ****//

	.driver-active {

		.select2-container {
			
			&.select2-container--open {

				* {
					pointer-events: auto !important;
				}
			}
		}
	}

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

	.driver-active {

		&:has(.driver-active-element .wp-picker-container.wp-picker-active) {

			.driver-overlay {
				display: none !important
			}
		}
	}

	//**** WP-SIDE-NAVIGATION ****//

	[id="adminmenu"] {

		li {

			a.wp-has-submenu {

				&.driver-active-element {

					~ .wp-submenu {
						bottom: -10px !important;
						top: unset !important;
						opacity: 0;
					}
				}
			}
		}
	}

	.wp-submenu {

		&:has(.driver-active-element) {
			bottom: -10px !important;
			top: unset !important;
			opacity: 1;
		}
	}

	//**** WP-MENUS ****//

	.menu-item-handle {

		&.driver-active-element {

			.item-edit {

				&:before {
					animation: pulse-shadow 1.5s infinite ease-in-out;
				}
			}
		}
	}

	.driver-active-element {

		&.locations-row-links {

			a {
				box-shadow: none !important;
			}
		}

		&.menu-item-handle {
			cursor: default;
		}
	}

	//**** GUTENBERG ****//
	
	.driver-active {

		.components-popover__fallback-container {

			&,
			* {
				pointer-events: auto;
			}
		}

		// .interface-interface-skeleton__content {
		// 	overflow: unset !important;
		// }

		.interface-interface-skeleton {
			position: static;
		}
		
		.edit-post-layout__metaboxes,
		.interface-interface-skeleton__footer,
		.components-notice-list {
			display: none;
		}
		
		.interface-interface-skeleton__sidebar {
			z-index: 99999;
		}
	}

	.driver-active-element {

		.editor-sidebar__panel-tabs {

			&,
			* {
				pointer-events: none;
			}

			// &:before {
			// 	content: "";
			// 	position: absolute;
			// 	inset: 0;
			// }
		}
	}

	//**** ELEMENTOR ****//

	.driver-active,
	.driver-active-iframe {

		[id="e-announcements-root"],
		[id="e-checklist"] {
			display: none !important;
		}
	}

	.driver-active {

		[id="elementor-editor-wrapper-v2"] {

			.MuiButtonGroup-root {

				button {
					pointer-events: auto !important;
				}
			}
		}

		> .select2-container,
		> .pcr-app {
			
			&,
			* {
				pointer-events: auto !important;
			}
		}
	}

	.driver-active-iframe {

		.xts-tour-navigation {
			display: block !important;
		}

		#elementor-editor-wrapper-v2,
		#elementor-navigator,
		.elementor-panel {
			pointer-events: none;
		}
	}

	//**** WPBAKERY ****//

	.driver-active {

		[id="vc_ui-helper-promo-popup"],
		.wp-pointer {
			display: none !important;
		}
	}

	.driver-active-element {

		&.wpb_content_element {

			.vc_controls {
				opacity: 1 !important;
				visibility: visible !important;

				.vc_control-btn:not(.vc_control-btn-edit) {

					&,
					* {
						pointer-events: none !important;
					}
				}

				.vc_control-btn-edit {
					
					.vc_btn-content {
						animation: pulse-shadow 1.5s infinite ease-in-out;
						border: 1px solid var(--xts-primary-color);
					}
				}
			}
		}

		.vc_ui-panel-header-container,
		.vc_ui-panel-footer-container {

			&,
			* {
				pointer-events: none !important;
			}
		}

		.vc_ui-panel-header-container {

			.vc_edit-form-tab-control {
				
				&,
				* {
					pointer-events: auto !important;
				}
			}
		}
	}

	// .vc_ui-panel-window {

	// 	&:has(.driver-active-element) {
	// 		z-index: 100000 !important;
	// 	}
	// }

	// ------------------------------------------------------------------------------------------------
	// TOUR NUMBER & STEP
	// ------------------------------------------------------------------------------------------------

	// .wd-guide-tour-1 {

	// 	&.wd-guide-step-2 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// .wd-guide-tour-2 {

	// 	&.wd-guide-step-5 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// .wd-guide-tour-3 {

	// 	&.wd-guide-step-4,
	// 	&.wd-guide-step-5,
	// 	&.wd-guide-step-6 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// .wd-guide-tour-4 {

	// 	&.wd-guide-step-13 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// .wd-guide-tour-6 { // GUTENBERG

	// 	&.wd-guide-step-6,
	// 	&.wd-guide-step-7 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// .wd-guide-tour-7 { // WPB

	// 	&.wd-guide-step-7,
	// 	&.wd-guide-step-8,
	// 	&.wd-guide-step-9 {

	// 		.xts-tour-navigation {
	// 			@extend %navigation-position;
	// 		}
	// 	}
	// }

	// @extend %navigation-position;

	// %navigation-position {
	// 	inset-inline-start: 20px;
	// 	inset-inline-end: unset;
	// }

	// ------------------------------------------------------------------------------------------------
	// TOUR NAVIGATION
	// ------------------------------------------------------------------------------------------------
	
	.xts-tour-navigation {
		display: none;
		position: fixed;
		bottom: 0;
		inset-inline-end: 20px;
		background: #fff;
		z-index: 100000;
		min-width: 380px;
		// width: 380px;
		pointer-events: auto !important;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		box-shadow: 0 1px 10px #0006;
		font-size: 13px; // NOTE FOR FRONTEND
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		// user-select: text;

		li {

			&.xts-active,
			&.xts-done {
				// font-weight: 700;
				color: #2D2D2D;
			}
	
			&.xts-active {
				color: var(--xts-primary-color);
			}

			&.xts-done {

				&:after {
					opacity: 1;
				}
			}

			&:after {
				content: "\f15e";
				position: relative;
				top: 2px;
				font-weight: 400;
				font-family: "dashicons";
				-webkit-font-smoothing: antialiased;
				opacity: 0;
				font-size: 16px;
				line-height: 1;
			}
		}

		* {
			pointer-events: auto !important;
		}

		&.xts-collapse {

			.xts-tour-steps {
				display: none;
			}

			.xts-tour-collapse {
				transform: rotate(180deg);
			}

			.xts-tour-title {
				display: none;
			}

			.xts-step-title {
				display: block;
			}
		}
	}

	.xts-tour-close,
	.xts-tour-collapse {
		text-decoration: none;
		box-shadow: none !important;

		span {
			font-size: 24px;
			width: auto;
			height: auto;
			color: #000;
		}

		&:hover {
			opacity: .7;
		}
	}

	.whb-element-actions {

		&:has(.driver-active-element) {
			opacity: 1;
			visibility: visible;
		}
	}

	.driver-active {

		.xts-tour-navigation {
			display: block;
		}
	}

	.xts-tour-heading {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5px;
		padding: 20px 20px 17px 20px;
		// border-bottom: 1px solid var(--xts-option-border-color);

		> h4 {
			font-size: 16px;
			margin-block: 0;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			font-weight: 600;
			color: #3c434a;
			flex-grow: 1;
		}

		.xts-step-title {
			display: none;
		}
	}

	// .xts-tour-progress {
	// 	// padding: 15px;
	// }

	.xts-tour-progress-bar {
		display: block;
		background-color: var(--xts-primary-color);
		height: 3px;
	}

	.xts-tour-steps {
		padding: 20px;
		font-weight: 600;
		color: #DCDCDC;
		// padding-top: 15px;
		border-top: 1px solid var(--xts-option-border-color);
	}

	.xts-tour-step {

		&.xts-done,
		&.xts-active {
			
			.xts-step-heading {
				color: #2D2D2D;
			}
		}

		&:not(.xts-active) {

			.xts-step-content {
				display: none;
			}
		}

		&.xts-done {

			.xts-step-heading {

				span {

					&:after {
						opacity: 1;
					}
				}
			}
		}

		&.xts-open {

			.xts-step-heading {

				&:after {
					content: "\f460";
				}
			}
		}

		&:not(:last-child) {
			margin-bottom: 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid var(--xts-option-border-color);
		}
	}

	.xts-step-heading {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all .25s ease;
		// gap: 5px;

		span {
			display: flex;
			align-items: center;
			gap: 5px;

			&:after {
				content: "\f15e";
				font-weight: 400;
				font-family: "dashicons";
				-webkit-font-smoothing: antialiased;
				opacity: 0;
				font-size: 16px;
				line-height: 1;
			}
		}

		&:hover {
			opacity: .7;
		}

		&:after {
			content: "\f543";
			font-weight: 400;
			font-family: "dashicons";
			-webkit-font-smoothing: antialiased;
			font-size: 16px;
			line-height: 1;
		}
	}

	.xts-step-content {
		display: none;

		ul {
			display: flex;
			flex-direction: column;
			gap: 10px;
			list-style: decimal;
			margin-inline-start: 30px;
			margin-block: 10px 0;
			padding: 0 !important;
		}

		li {
			margin-bottom: 0;
			line-height: 1;
			list-style: inherit; // NOTE FOR ELEMENTOR
		}

		.xts-open & {
			display: block !important;
		}
	}

	.driver-no-interaction {

		.driver-popover {

			* {
				pointer-events: auto !important;
			}
		}
	}
}