// ------------------------------------------------------------------------------------------------
// SETUP WIZARD
// ------------------------------------------------------------------------------------------------

@if $page-setup-wizard {

	.xts-wizard {

		#wpbody-content {
			--xts-content-width: 100%;
			// display: flex;
			// align-items: center;
			// flex-direction: column;
			// justify-content: center;
			// padding-top: 0;
			// min-height: calc(100vh - 100px);
			// min-height: 100vh;
			// max-width: 100%;
			padding-block: 20px 50px;

			:is(
			.xts-setup-wizard-wrap,
			.xts-footer) {
				// margin-right: auto;
				// margin-left: auto;
				// margin-inline: auto;
				// max-width: 1000px;
				width: 100%;
				max-width: 1800px;
			}

			.xts-footer {
				margin-top: 20px;
			}
		}

		&:has(.xts-plugin-wrapper.xts-loading), // #PARTS-HAS
		&:has(.xts-import-items.xts-loading) { // #PARTS-HAS

			.xts-wizard-nav,
			#wpadminbar,
			#adminmenu,
			.xts-footer.xts-theme-style {
				pointer-events: none;
			}
		}
	}

	.xts-setup-wizard {
		--xts-input-height: 50px;
		display: flex;
		flex-direction: column;
		border-radius: var(--xts-brd-radius);
		background-color: #FFF;
		min-height: calc(100vh - 175px);
		background-image: url(../../../../../inc/admin/modules/setup-wizard/images/background.svg);
		background-position: center;
		background-size: cover;

		img {
			max-width: 100%;
			height: auto;
			vertical-align: middle;
		}

		a {
			outline: none;
			box-shadow: none;
			text-decoration: none;
			transition: all .25s ease;
		}

		input[type="text"] {

			&:disabled {
				pointer-events: none;
			}
		}

		.xts-box {
			background-color: transparent;
			box-shadow: none;
		}

		.xts-box-header {
			display: block;
			margin-bottom: 25px;
			min-height: auto;
			border: none;

			// h3 {
			// 	margin: 0;
			// }
		}

		:is(
		.xts-box-header,
		.xts-box-content) {
			padding: 0;
		}

		.xts-msg {

			> p {
				// margin-top: 0;
				// margin-bottom: 30px;
				margin-block: 0 30px;
			}
		}

		.xts-notice {
			font-size: 12px;
		}

		// .xts-note {
		// 	// background-color: #F9F9F9;
		// 	font-size: 12px;
		// }

		::-webkit-scrollbar,
		::-webkit-scrollbar-track,
		::-webkit-scrollbar-thumb {
			border-radius: 3px;
		}

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

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

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

		//**** BUTTONS ****//

		.xts-skip {
			font-weight: 400;

			&:not(.xts-skip-setup) {
				position: absolute;
				inset-inline-end: 30px;
				// top: 140px;
				top: 35px;
				z-index: 10;
			}
		}
	}

	.xts-wizard-img {
		margin-bottom: 20px;
	}

	.xts-step-actions {
		// display: inline-flex;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		gap: 15px;

		.xts-inline-btn {
			font-weight: 400;
		}
	}

	.xts-wizard-nav {
		// border-bottom: 1px solid var(--xts-option-border-color);
		padding: 25px 30px 0px 30px;
		overflow: hidden;

		ul {
			position: relative;
			display: flex;
			margin: 0;
			// margin-inline-end: -16%;
			counter-reset: section;

			&:before {
				content: "";
				position: absolute;
				bottom: 8px;
				inset-inline: 0;
				// inset-inline-start: 0;
				// inset-inline-end: 16%;
				// width: 100%;
				height: 3px;
				background-color: #EBEBEB;
			}

			li {
				position: relative;
				display: flex;
				transition: all .25s ease;
				user-select: none;
				// flex-grow: 1;
				z-index: 1;
				// justify-content: center;
				flex: 1;
				// width: 100%;
				white-space: nowrap;
				font-size: 14px;
				margin-bottom: 0;
				counter-increment: section;

				.xts-wizard-nav-content {
					// max-width: 27px;
					color: #e2e2e2;
					// transition: all .25s ease;
					line-height: 1;
					transition-duration: 0s;

					&:before {
						content: counter(section, decimal-leading-zero);
						font-size: 20px;
						font-weight: 600;
						color: #e2e2e2;
						margin-inline-start: -4px;
						// transition: all .25s ease;
					}

					&:after {
						content: "";
						display: block;
						width: 6px;
						height: 6px;
						border-radius: 50%;
						background-color: #FFF;
						border: 6px solid var(--xts-primary-color);
						margin-top: 5px;
						box-shadow: 0px 0px 0px 3px rgba(255,255,255,1);
						// transition: all .25s ease;
					}
				}

				&:is(
				.xts-active,
				.xts-disabled) {
					pointer-events: none;
				}

				&.xts-disabled {

					.xts-wizard-nav-content {

						&:after {
							background-color: #EBEBEB;
							border-color: #EBEBEB;
						}
					}
				}

				&.xts-active {

					.xts-wizard-nav-content {
						color: #656565;

						&:before {
							color: #000;
						}
					}
				}

				&:not(:is(.xts-active, .xts-disabled)) {

					.xts-wizard-nav-content {

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

					&:before {
						content: "";
						position: absolute;
						top: 32px;
						inset-inline-start: 21px;
						background-color: var(--xts-primary-color);
						height: 3px;
						width: calc(100% - 18px);
					}

					&:after {
						content: "\f15e";
						position: absolute;
						top: 25px;
						inset-inline-start: 2px;
						font-family: "dashicons";
						color: #FFF;
						font-size: 14px;
						pointer-events: none;
						// transition: all .25s ease;
					}

					// &:hover {

					// 	.xts-wizard-nav-content {
					// 		color: #656565;
	
					// 		&:before {
					// 			color: #000;
					// 		}
					// 	}
					// }
				}

				&[data-slug="welcome"] {
					display: none;
				}

				&[data-slug="done"] {
					position: absolute;
					inset-inline-end: 0;
					bottom: 0;

					.xts-wizard-nav-content:after {
						margin-inline-start: auto;
					}
				}
			}
		}
	}

	.xts-wizard-nav-btn {
		pointer-events: none;
		// transition: none !important;
		transition-duration: 0s !important;
	}

	.xts-wizard-content {
		position: relative;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		justify-content: space-between;
		border-radius: var(--xts-brd-radius);
		padding: 90px 30px 40px 30px;
		text-align: center;

		h3 {
			font-size: 30px;
			line-height: 1;
		}

		p {
			color: #727272;
			font-size: 15px;
			margin-bottom: 0;
		}

		.xts-btn {
			// display: inline-flex;
			align-items: center;
			padding: 0 30px;
			height: 50px;
			line-height: 50px;
			font-size: 15px;

			&.xts-shown {
				display: inline-flex;
			}
		}

		// .xts-disabled .xts-color-primary, // NOTE IF FOOTER IS DISABLED
		// .xts-color-primary.xts-disabled {
		// 	// background-color: var(--xts-grey-color) !important;
		// 	color: #B9B9B9 !important;
		// 	pointer-events: none;
		// 	user-select: none;
		// }

		// .xts-disabled .xts-btn.xts-color-primary,
		// .xts-color-primary.xts-disabled {
		// 	background-color: var(--xts-grey-color) !important;
		// }

		// .xts-disabled {

		// 	.xts-inline-btn {
		// 		opacity: .5;
		// 	}
		// }

		.xts-next {

			&:after {
				margin-inline: 5px -5px;
				font-weight: 400;

				@include font-icon($xts-icon-button-right);

				.rtl & {
					@include font-icon($xts-icon-button-left);
				}
			}
		}

		.xts-prev {

			&:before {
				margin-inline: -5px 5px;
				font-weight: 400;

				@include font-icon($xts-icon-button-left);
			}

			.rtl & {

				&:before {
					@include font-icon($xts-icon-button-right);
				}
			}
		}
	}

	.xts-wizard-logo {
		margin-bottom: 25px;
		min-height: 36px;
		max-width: 245px;
		width: 245px;
	}

	.xts-wizard-content-inner {
		max-width: 715px;
		margin-inline: auto;
		width: 100%;
	}

	@media (max-width: 1400px) {

		.xts-wizard-content {
			padding-top: 60px;
		}
	}

	// @media (min-width: 1025px) and (max-width: 1300px) {

	// 	.xts-wizard-nav-content {
	// 		font-size: 0;
	// 	}
	// }

	@media (max-width: 1300px) {

		// .xts-wizard-nav-content {
		// 	font-size: 0;
		// }

		.xts-wizard-nav {

			ul {

				li:not(.xts-active) {
					font-size: 0;

					.xts-wizard-nav-content {

						&:before {
							opacity: 0;
						}
					}
				}

				li[data-slug="prebuilt-websites"] {
					padding-inline-end: 18px;
				}
			}
		}
	}

	// ------------------------------------------
	// 1. WELCOME
	// ------------------------------------------

	.xts-wizard-welcome-img {
		margin-block: 0 15px;
	}

	.xts-setup-wizard {

		&:has(.xts-active[data-slug="welcome"]) {
			background-image: url(../../../../../inc/admin/modules/setup-wizard/images/welcome-bg.jpg);
			background-size: 80%;
			background-repeat: no-repeat;
			background-position-x: center;
			background-position-y: 30%;

			h3 {
				font-size: 30px;
			}

			.xts-wizard-nav {
				display: none;
			}

			.xts-wizard-content {
				justify-content: center;
				background-image: url(../../../../../inc/admin/modules/setup-wizard/images/background.svg);
				background-position: center;
				background-size: cover;
				text-align: center;
				overflow: hidden;
			}
		}
	}

	.xts-wizard-content {

		.xts-wizard-signature {
			margin-top: 15px;
			// min-height: 57px;
			line-height: 60px;

			img {
				margin-inline-start: 10px;
				max-width: 95px;
			}
		}
	}

	@media (min-width: 1200px) {

		.xts-wizard-welcome-img {
			margin-inline: -200px;
		}
	}

	// ------------------------------------------
	// 2. ACTIVATION
	// ------------------------------------------

	.xts-wizard-content {

		.xts-license {

			.xts-box-header {
				// display: flex;
				// flex-wrap: wrap;
				margin-bottom: 20px;

				h3 {
					margin: 0;
				}

				p {
					display: block;
					width: 100%;
				}
			}

			.xts-notice {
				text-align: center;
			}
		}

		.xts-licanse-dashboard-label {
			display: none;
		}

		.xts-license-img {
			display: none;
		}

		.xts-license-content {
			flex-basis: 100%;
			max-width: 100%;
		}

		.xts-activation-form {
			// align-items: center;

			input[type="text"] {
				padding-inline-end: 8px !important;
			}
		}

		.xts-activation-form-inner {
			max-width: 100%;

			span {
				display: none;
			}
		}

		.xts-license-btn {
			align-self: center;

			&:before {
				inset-inline-start: 25px;
				font-size: 15px;
			}

			input {
				padding-inline-start: 45px;
			}
		}

		.xts-activated-message {
			
			form {
				display: none;
			}
		}
	}

	// ------------------------------------------
	// 3. CHILD THEME
	// ------------------------------------------

	.xts-theme-images {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-block: 20px;
		min-height: 115px;

		> div {
			padding: 3px;
			// border: 1px solid rgba(0, 0, 0, .05);
			border: 1px solid var(--xts-option-border-color);
			border-radius: var(--xts-brd-radius);
			background-color: #FFF;

			img {
				border-radius: inherit;
			}
		}
	}

	.xts-main-image {
		position: relative;
		z-index: 5;
		transition: all .4s ease;
	}

	.xts-child-image {
		position: relative;
		margin-inline-start: 10px;
		max-width: 165px;
		opacity: 0;
		transition: all .4s ease;
		transform: translateX(-100%);

		&:before {
			position: absolute;
			top: -7px;
			inset-inline-end: -7px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: var(--xts-primary-color);
			color: #FFF;
			font-size: 17px;
			opacity: 0;
			transition: all .4s ease .4s;

			@include font-icon($xts-icon-check);
		}
	}

	.xts-install-child-theme {

		&.xts-loading {

			&:after {
				display: inline-block !important;

				@include act-loader;
			}
		}

		&:after {
			display: none !important;
			margin-inline-end: -5px;
			margin-inline-start: 12px;

			@include loader(14px,1px,rgba(255,255,255,.15),#FFF);
		}
	}



	.xts-wizard-child-theme {

		&.xts-installed {

			.xts-child-image {
				opacity: 1;
				transform: none;

				&:before {
					opacity: 1;
				}
			}

			.xts-install-child-theme,
			.xts-skip {
				display: none;
			}
		}

		&:not(.xts-installed) {

			.xts-main-image {
				transform: translateX(90px);
			}
			
			.xts-next {
				display: none;
			}
		}
	}

	// ------------------------------------------
	// 4. PAGE BUILDER
	// ------------------------------------------

	.xts-wizard-builder-select {
		display: flex;
		// flex-direction: column;
		gap: 15px;
		margin-top: 20px;

		> :is(
		div,
		span) {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			width: 100%;
		}

		> div {
			flex: 1 1 0%;
			align-items: center;
			flex-direction: column;
			// justify-content: flex-start;
			gap: 20px;
			padding: 25px 20px 20px 20px;
			// padding-top: 25px;
			// border: 1px solid #EDEDED;
			// border: 1px solid rgba(0, 0, 0, .05);
			border-radius: var(--xts-brd-radius);
			background-color: #FFF;
			text-align: center;
			cursor: pointer;
			transition: all .25s ease;
			border: 1px solid var(--xts-option-border-color);

			> * {
				// opacity: .5;
				// filter: grayscale(100%);
				transition: inherit;
			}

			p {
				// margin-bottom: 0;
				font-size: 13px;
			}

			// &.xts-active {

			// 	> * {
			// 		opacity: 1;
			// 		filter: grayscale(0);
			// 	}
			// }

			// &.xts-active,
			// &:hover {
			// 	// border-color: var(--xts-btn-primay-color);
			// 	// box-shadow: inset 0 0 0 1px var(--xts-btn-primay-color);
			// 	border-color: var(--xts-btn-primay-color);
			// }

			&:hover {
				border-color: #CACACA;
			}

			&.xts-active {
				border-color: var(--xts-btn-primay-color);
				box-shadow: inset 0 0 0 1px var(--xts-btn-primay-color);
			}
		}

		> span {
			display: none;
			// margin-right: 15px;
			// margin-left: 15px;
			// margin-inline: 15px;
			font-weight: 500;
		}
	}

	.xts-page-builder-img {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
	}

	.xts-page-builder-text {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.xts-page-builder-title {
		// margin-top: 15px;
		// margin-bottom: 8px;
		// margin-block: 15px 8px;
		color: #333;
		font-weight: 700;
		font-size: 16px;
	}

	// ------------------------------------------
	// 6. IMPORT
	// ------------------------------------------

	.xts-wizard-content-inner {

		&.xts-wizard-dummy {
			display: none;
			max-width: 100%;

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

	.xts-setup-wizard {

		&:has(.xts-wizard-dummy.xts-active) {
			background-image: none;

			.xts-wizard-content {
				padding-top: 30px;
			}
		}
	}

	.xts-wizard-dummy {
		// margin-top: -40px;

		// .xts-skip {
		// 	top: 125px !important;
		// }

		.xts-note {
			display: block !important;
		}

		:is(
		.xts-btn,
		.xts-bordered-btn) {
			padding: 0 10px;
			height: 30px;
			font-size: 11px;
			line-height: 30px;
		}

		.xts-col-remove-content,
		.xts-buttons-control {
			display: none !important;
		}

		.xts-notices-sticky {
			background-color: #F7F7F7;
			margin: 0;
			padding: 0;
		}

		.xts-box-footer {
			display: none;
		}

		.xts-import-item {

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

		.xts-import-item-title {
			font-size: 13px;
			line-height: 15px;
		}

		.xts-import-item-btn {

			&:after {
				inset-inline-start: 7px;
			}
		}

		.xts-import-item-footer {
			padding: 10px;
		}
	}

	.xts-wizard-dummy {

		&.imported-base {

			.xts-skip {
				display: none;
			}
		}
	}

	// ------------------------------------------
	// 6.1 INSTALLING IMPORT
	// ------------------------------------------

	.xts-wizard-content-inner {

		&.xts-wizard-import-template {
			display: none;

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

		.xts-import-status {
			margin-block: 0 20px;

			li {
				margin: 0;
				font-size: 15px;

				&:last-child {
					font-weight: 600;
				}

				&:not(:last-child) {

					&:after {
						content: "...";
						animation: dotsClip 1s steps(1) infinite;
					}
				}

				&:not(.xts-active) {
					display: none;
				}
			}
		}
	}

	.xts-wizard-import-template {

		.xts-import-item {
			max-width: 368px;
			margin-inline: auto;
			margin-block: 20px;
			overflow: visible;
			pointer-events: none;
			opacity: 1 !important;

			.xts-box-labels,
			.xts-import-item-preview {
				display: none !important;
			}

			&:after {
				content: "\e900";
				position: absolute;
				top: -8px;
				inset-inline-end: -8px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: var(--xts-primary-color);
				color: #FFF;
				font-family: "xts-icon-font";
				font-size: 17px;
				opacity: 0;
				font-weight: 400;
				-webkit-font-smoothing: antialiased;
				transition: all .25s ease;
			}
		}

		.xts-import-item-image {
			border-radius: var(--xts-option-border-radius);
			transition: all .25s ease;
		}

		.xts-note,
		.xts-notice {
			text-align: center;
			padding-inline: 15px;
		}

		.xts-box {
			margin-top: 20px;

			.xts-notice {

				&.xts-success {
					display: none;
				}
			}
		}
	}

	.xts-setup-wizard {

		&.xts-loading {

			.xts-import-progress-bar,
			.xts-import-progress-bar-percent {
				opacity: 1;
				visibility: visible;
			}

			.xts-import-item-image:before {
				background-color: rgba(0,0,0,.3);
			}

			.xts-btn {
				pointer-events: none;
				opacity: .7;
			}
		}

		&.xts-imported {

			.xts-import-item {
				box-shadow: 0 0px 20px rgba(var(--xts-primary-color-darker-10--rgb),.5);

				&:after {
					opacity: 1;
				}
			}

			// .xts-import-progress-bar {
			// 	opacity: 1;
			// 	visibility: visible;
			// }

			.xts-import-item-image {
				box-shadow: 0px 0px 0px 2px var(--xts-primary-color);
			}

			.xts-wizard-nav {
				pointer-events: none;
			}

			.xts-notice.xts-info,
			.xts-note {
				display: none;
			}

			// .xts-import-item-image:before {
			// 	background-color: rgba(0,0,0,.1);
			// }
		}
	}

	// ------------------------------------------
	// 7. DONE
	// ------------------------------------------

	.xts-wizard-content-inner {

		&.xts-wizard-done {
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			text-align: center;

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

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

	@media (max-width: 1024px) {

		// .xts-wizard-nav {
		// 	max-width: 200px;

		// 	ul {
		// 		padding: 45px 25px;
		// 	}
		// }

		// .xts-wizard-help {
		// 	padding-inline: 20px;
		// }

		.xts-wizard-builder-select {
			flex-direction: column;
		}

		.xts-setup-wizard {

			.xts-wizard-content {

				.xts-plugin-heading {
					flex-basis: 30%;
				}
			}

			.xts-plugin-wrapper {

				> * {
					flex: 1;
				}
			}

			.xts-plugin-name {
				max-width: 110px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 13px;
			}
	
			.xts-plugin-version {
				display: none;
			}
			
			&:has(.xts-wizard-dummy.xts-active) {

				.xts-wizard-content {
					padding-top: 60px;
				}
			}

			.xts-import-search {
				width: 100%;
				margin-top: 10px;

				input[type="text"] {
					width: 100%;
					max-width: 100%;
				}
			}
		}

		.xts-wizard-content {
			padding-inline: 20px;
		}
	}

	// ------------------------------------------
	// 6. IMPORT
	// ------------------------------------------

	@media (min-width: 1550px) {

		.xts-wizard-dummy {

			.xts-col-xl-2 {
				flex: 0 0 16.66666%;
				max-width: 16.66666%;
			}
		}
	}

	@media (min-width: 1400px) {

		.xts-wizard-dummy {
		
			.xts-import-item-wrap {

				&.xts-col-xl-4 {
					flex: 0 0 25%;
					max-width: 25%;
				}
			}
		}
	}
}