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

@if $page-setup-wizard {

	.xts-wizard {

		#wpbody-content {
			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%;

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

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

	.xts-setup-wizard {
		display: flex;
		min-height: 580px;
		border-radius: var(--xts-brd-radius);
		background-color: #F7F7F7;

		--xts-primary-color: #7CB32B;
		--xts-btn-primay-color: #7CB32B;
		--xts-btn-primary-color-hover: #70A128;
		--xts-primary-color-darker-10: #70A128;
		--xts-primary-color-darker-20: #659124;
		--xts-primary-color--rgb: 124, 179, 43;

		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 {
			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;
		}

		::-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);
		}
	}

	.xts-wizard-nav {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: 260px;
		width: 100%;
		// background: linear-gradient(180deg, var(--xts-primary-color) 0%, var(--xts-primary-color-darker-10) 100%);
		background: linear-gradient(180deg, rgba(124,179,43,1) 0%, rgba(104,153,30,1) 100%);

		border-start-start-radius: var(--xts-brd-radius);
		border-end-start-radius: var(--xts-brd-radius);
		flex-shrink: 0;

		ul {
			margin: 0;
			padding: 60px 45px;

			li {
				margin-bottom: 20px;
				transition: all .25s ease;
				user-select: none;

				a {
					position: relative;
					display: flex;
					align-items: center;
					color: rgba(255,255,255,.8);

					&:before {
						content: "";
						display: block;
						margin-inline: 1px 13px;
						// margin-inline-start: 1px;
						// margin-inline-end: 13px;
						width: 20px;
						height: 20px;
						border-radius: 50%;
						background-color: #FFF;
					}

					&:after {
						content: "\f15e";
						position: absolute;
						top: 0;
						inset-inline-start: 1px;
						width: 20px;
						color: var(--xts-primary-color);
						text-align: center;
						font-size: 16px;
						font-family: "dashicons";
						line-height: 20px;
					}
				}

				&.xts-active {
					opacity: 1;

					a {
						color: #FFF;

						&:after {
							top: 6px;
							inset-inline-start: 7px;
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background-color: var(--xts-primary-color);
							font-size: 0;
						}
					}
				}

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

				&.xts-disabled {
					opacity: .5;

					a {

						&:before {
							margin-top: 1px;
							margin-inline: 2px 14px;
							// margin-inline-start: 2px;
							// margin-inline-end: 14px;
							margin-bottom: 2px;
							width: 17px;
							height: 17px;
						}

						&:after {
							display: none;
						}
					}
				}

				&:hover {

					&:not(.xts-disabled) {

						a {
							color: #FFF;
						}
					}
				}
			}
		}

		.xts-wizard-nav-bg-img {
			position: absolute;
			// right: 0;
			// left: 0;
			inset-inline: 0;
			bottom: 0;
		}
	}

	.xts-wizard-help {
		display: flex;
		align-items: center;
		padding: 0 40px 40px 40px;
		color: #FFF;
		font-size: 18px;

		&:before {
			margin-inline-end: 10px;
		}

		&:hover,
		&:focus {
			color: rgba(255,255,255,.8);
		}
	}

	.xts-wizard-content {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		justify-content: space-between;
		padding: 60px 60px 40px 60px;

		h3 {
			// margin-top: 0;
			// margin-bottom: 25px;
			font-size: 26px;
			line-height: 1;

			// + p {
			// 	margin-bottom: 25px;
			// }
		}

		p {
			color: #A2A2A2;
		}

		.xts-btn {
			// display: inline-flex;
			align-items: center;
			padding: 0 20px;
			height: 40px;
			line-height: 40px;

			&.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-start: 5px;
				// margin-inline-end: -5px;
				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-start: -5px;
				// margin-inline-end: 5px;
				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-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30px;

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

	:is(
	.xts-wizard-footer,
	.xts-wizard-buttons) {

		:is(
		.xts-btn,
		.xts-inline-btn) {

			&:not(:first-child) {
				margin-inline-start: 20px;
			}
		}

		.xts-inline-btn {
			// margin-top: 10px;
			// margin-bottom: 10px;
			margin-block: 10px;
		}
	}

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

	.xts-wizard-welcome {

		p {
			max-width: 550px;
		}
	}

	.xts-wizard-content {

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

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

	.xts-wizard-buttons {
		margin-top: 40px;
	}

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

	.xts-wizard-content {

		.xts-license {

			.xts-box-header {
				// display: flex;
				flex-wrap: wrap;

				h3 {
					margin-bottom: 20px;
				}

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

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

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

		.xts-license-btn {

			&:before {
				inset-inline-start: 14px;
			}

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

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

	.xts-wizard-child-theme {

		&.xts-installed {

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

				&:before {
					opacity: 1;
				}
			}

			+ .xts-wizard-footer {

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

		&:not(.xts-installed) {

			+ .xts-wizard-footer {

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

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

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

			img {
				border-radius: inherit;
			}
		}
	}

	.xts-main-image {
		position: relative;
		z-index: 5;
	}

	.xts-child-image {
		position: relative;
		margin-inline-start: 10px;
		max-width: 135px;
		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-color-primary {
				background-color: var(--xts-grey-color);
				color: #B9B9B9;
				pointer-events: none;
				user-select: none;
			}
		}
	}

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

	.xts-wizard-builder-select {
		display: flex;

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

		> div {
			flex: 1 1 0%;
			padding: 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;;

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

			p {
				margin-bottom: 0;
			}

			&.xts-active {

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

			&.xts-active,
			&:hover {
				border-color: #E2E2E2;
			}
		}

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

	.xts-page-builder-img {
		min-height: 40px;
	}

	.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-dummy {

		.xts-sp-20 {
			--xts-sp: 10px;
		}

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

		.xts-box-header {
			margin-bottom: 20px;

			.xts-col {
				justify-content: space-between;
			}

			.xts-import-search {
				// margin-inline-start: 10px;
				// margin-inline-end: 0;
				margin-inline: 10px 0;
			}
		}

		:is(
		.xts-col-remove-content,
		.xts-col-dummy-nav) {
			display: none !important;
		}

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

		.xts-box-content {
			overflow-x: hidden;
			overflow-y: scroll;
			padding-inline-end: 10px;
			padding-bottom: 5px !important;
			min-height: 400px;
			max-height: 400px;
		}

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

		.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-wizard-footer {

				.xts-skip {
					display: none;
				}

				.xts-prev {
					visibility: hidden;
					opacity: 0;
				}
			}
		}

		&:not(.imported-base) {

			+ .xts-wizard-footer {

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

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

	.xts-wizard-content-inner {

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

			> p {
				margin-top: 0;
			}

			.xts-wizard-buttons {
				margin-top: 10px;
			}
		}
	}

	.xts-setup-wizard {

		&.xts-done {

			.xts-wizard-content-inner {

				&.xts-wizard-dummy {

					&,
					+ .xts-wizard-footer {
						display: none;
					}
				}

				&.xts-wizard-done {
					display: flex;
				}
			}

			.xts-wizard-done-nav {
				display: block;
			}

			.xts-wizard-nav {

				> ul,
				.xts-wizard-help {
					display: none;
				}
			}
		}
	}

	.xts-wizard-done-nav {
		display: none;
		margin-top: 50px;
		// margin-right: 15px;
		// margin-left: 15px;
		margin-inline: 15px;
		text-align: center;

		h3 {
			color: #FFF;
			font-size: 22px;
		}

		p {
			margin: 0 auto;
			max-width: 210px;
			color: rgba(255, 255, 255, .8);
			font-size: 16px;
		}
	}

	.xts-wizard-done-nav-img {
		min-height: 140px;
	}

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

	@media (max-width: 1024px) {

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

			ul {
				padding: 45px 25px;
			}
		}

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

	// ------------------------------------------------------------------------------------------------
	// RTL
	// ------------------------------------------------------------------------------------------------

	// .rtl {

	// 	.xts-wizard-nav {

	// 		ul {

	// 			li {
	// 				a {

	// 					&:before {
	// 						margin-right: 1px;
	// 						margin-left: 13px;
	// 					}

	// 					&:after {
	// 						right: 1px;
	// 						left: auto;
	// 					}
	// 				}

	// 				&.xts-active {

	// 					a {

	// 						&:after {
	// 							right: 7px;
	// 							left: auto;
	// 						}
	// 					}
	// 				}

	// 				&.xts-disabled {

	// 					a {

	// 						&:before {
	// 							margin-right: 2px;
	// 							margin-left: 14px;
	// 						}
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.xts-wizard-help {

	// 		&:before {
	// 			margin-right: 0;
	// 			margin-left: 10px;
	// 		}
	// 	}

	// 	.xts-wizard-content {

	// 		.xts-next {

	// 			&:after {
	// 				content: "\f341";
	// 				margin-right: 5px;
	// 				margin-left: -5px;
	// 			}
	// 		}

	// 		.xts-prev {

	// 			&:before {
	// 				content: "\f345";
	// 				margin-right: -5px;
	// 				margin-left: 5px;
	// 			}
	// 		}
	// 	}

	// 	.xts-wizard-footer,
	// 	.xts-wizard-buttons {

	// 		.xts-btn,
	// 		.xts-inline-btn {

	// 			&:not(:first-child) {
	// 				margin-right: 25px;
	// 				margin-left: 0;
	// 			}
	// 		}
	// 	}

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

	// 	.xts-wizard-content {

	// 		.xts-wizard-signature {

	// 			img {
	// 				margin-right: 10px;
	// 				margin-left: 0;
	// 			}
	// 		}
	// 	}

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


	// 	.xts-child-image {
	// 		margin-right: 10px;
	// 		margin-left: 0;
	// 		transform: translateX(100%);

	// 		&:before {
	// 			right: auto;
	// 			left: -7px;
	// 		}
	// 	}

	// 	.xts-install-child-theme {

	// 		&:after {
	// 			margin-right: 12px;
	// 			margin-left: -5px;
	// 		}
	// 	}
	// }

}