$prefix: wpz-onboard_;
$primary-color: #3496ff;
$secondary-color: scale-color($primary-color, $lightness: 25%);
$light-color: #fff;
$dark-color: #000;
$medium-color: #1d2327;
$grey-color: #ddd;
$dark-grey-color: #666;
$bluish-grey-color: #81909c;
$dark-blue-color: #2271b1;
$green-color: #22bb66;
$yellow-color: #f0c33c;
$orange-color: #f57c00;

.#{$prefix}demo-import-modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s linear, visibility .2s linear;
	z-index: 9999;

	&.is-import-modal-open {
		opacity: 1;
		visibility: visible;
	}

	&::after {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 9998;
	}

	.inner-demo-import-modal {
		padding: 25px 30px;
		position: absolute;
		width: auto;
		height: auto;
		max-width: 850px;
		max-height: 85%;
		left: 50%;
		top: 50%;
		background: $light-color;
		border-radius: 3px;
		transform: translate(-50%, -50%);
		z-index: 9999;
		overflow-y: scroll;
	}

	&[data-xml-processing="yes"] {
		.#{$prefix}demo-import-advanced-settings {
			display: none;
		}
	}
	&[data-xml-processing="no"] {
		.#{$prefix}demo-import-main-content {
			.current-importing-status {
				display: none;
			}
		}
	}
	&[data-xml-processing="done"] {
		.#{$prefix}demo-import-main-content {
			text-align: center;
			padding: 1.8rem;
			padding-top: 0;

			p {
				margin: 0;
				margin-bottom: 1em;

				&:last-child {
					margin-bottom: 0;
				}
			}
			a {
				text-decoration: none;
			}

			.#{$prefix}success-icon-header {
				display: inline-block;
				position: relative;
				margin-bottom: 2rem;
				width: 60px;
				height: 60px;

				&::before {
					content: url("data:image/svg+xml,%3Csvg width='51' height='52' viewBox='0 0 51 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='6' y='11' width='39' height='30'%3E%3Cpath d='M18.6898 34.396L9.82854 25.361L6.81104 28.416L18.6898 40.5277L44.1898 14.5277L41.1935 11.4727L18.6898 34.396Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='51' height='52' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 1;
				}
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: $green-color;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
	&[data-delete-imported-demo="yes"] {
		.#{$prefix}demo-import-advanced-settings {
			display: none;
		}
		p.description {
			font-size: 14px;
		}
	}
}

.#{$prefix}demo-import-modal-header {
	position: relative;
	margin-bottom: 1.8rem;
	h3 {
		font-size: 1.4rem;
		line-height: 1.4;
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 30px;
		display: block;
		border-bottom: 1px solid #dddddd;
	}
	.#{$prefix}demo-import-close {
		position: absolute;
		top: 0;
		right: 0;

		&::before {
			content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='4' y='5' width='15' height='14'%3E%3Cpath d='M18.9067 6.41L17.5037 5L11.9411 10.59L6.37854 5L4.97546 6.41L10.538 12L4.97546 17.59L6.37854 19L11.9411 13.41L17.5037 19L18.9067 17.59L13.3442 12L18.9067 6.41Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='23.8822' height='24' fill='%239CA2A7'/%3E%3C/g%3E%3C/svg%3E%0A");
			display: block;
            float: none;
            height: auto;
            width: auto;
            margin: 0;
		}
		
		&:focus,
		&:active {
			outline: none;
			box-shadow: none;
		}
	}
}

.#{$prefix}demo-import-modal-content {
	.#{$prefix}demo-import-steps {
		ol {
			padding: 0;
			margin: 0;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			counter-reset: demo-steps-counter;

			li {
				flex: 0 33.3333%;
				position: relative;
				margin-bottom: 15px;
				counter-increment: demo-steps-counter;
				font-size: 16px;
				font-weight: 600;
				color: $dark-color;
				opacity: 0.5;
				transition: opacity .15s linear;

				&::before {
					content: counter(demo-steps-counter);
					width: 30px;
					height: 30px;
					display: inline-block;
					text-align: center;
					line-height: 28px;
					margin-right: 15px;
					border-radius: 50%;
					border: 1px solid $dark-color;
				}
				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					width: 60px;
					height: 2px;
					margin-top: -1px;
					background-color: $dark-color;
				}
				&:last-child::after {
					display: none;
				}
				&:nth-child(1)::after {
					margin-right: -25px;
				}
				&:nth-child(2) {
					text-align: center;
				}
				&:nth-child(2)::after {
					margin-right: -60px;
				}
				&:last-child {
					text-align: right;
				}

				&.active-step {
					opacity: 1;

					&::before {
						color: $green-color;
						border-color: $green-color;
					}
					&::after {
						opacity: 0.5;
					}
				}
			}
		}
		p.description {
			margin-top: 0;
			margin-bottom: 25px;
		}
	}
	.#{$prefix}demo-import-main-content {
		.current-importing-status-wrap {
			.current-importing-status {
				background: rgba(238, 238, 238, 0.5);
				border: 1px solid #9CA2A7;
				box-sizing: border-box;
				border-radius: 4px;
				padding: 10px;
				margin-bottom: 20px;

				.current-importing-status-title {
					font-weight: 600;
					font-size: 13px;
					line-height: 20px;
					color: $dark-color;
					margin: 0;
					margin-bottom: 5px;
				}
				.current-importing-status-description {
					font-size: 13px;
					color: $dark-color;
					margin: 0;
				}
			}
			.wpzoom-demo-import-process-wrap {
				margin-bottom: 10px;

				progress-ring {
					display: inline-block;
					vertical-align: middle;
					font-size: 0;
					line-height: 0;

					&::before,
					&::after {
						opacity: 0;
						transition: all 0.3s ease;
					}
				}
				progress-ring + .wpzoom-demo-import-process-type-count {
					display: inline-block;
					vertical-align: middle;
					margin-left: 15px;
					
					h3 {
						font-weight: 600;
						font-size: 14px;
					}

					& > * {
						display: inline-block;
						vertical-align: middle;
					}
				}
				&.process-status_active {
					progress-ring {
						position: relative;
						&::before {
							content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.779%201.00004L5.3618%2010.9753L1.06089%207.77735%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E%0A");
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 1;
							opacity: 1;
						}
						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							background-color: $green-color;
							width: 22px;
							height: 22px;
							border-radius: 50%;
							opacity: 1;
						}
					}
				}
			}
		}
	}
}

.#{$prefix}demo-import-advanced-settings {
	ul {
		.demo-import-advanced-settings-item {
			color: $dark-color;
			padding: 18px 12px;
			position: relative;
			width: 100%;
			background-color: $light-color;
			border-radius: 4px;
			border: 1px solid #dddddd;
			box-sizing: border-box;
			margin-bottom: 20px;
			transition: border-color .15s linear;

			> label {
				font-size: 14px;
				font-weight: 600;
				line-height: 1.8;
				display: block;
				pointer-events: none;

				.server-requirement-bad-badge {
					position: relative;
					top: -7px;
					right: -7px;
					width: 10px;
					height: 10px;
					border-radius: 10px;
					background-color: $orange-color;
					display: inline-block;
				}

				&::after {
					content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='5' y='8' width='13' height='8'%3E%3Cpath d='M16.5087 8.29492L11.9412 12.8749L7.37367 8.29492L5.97058 9.70492L11.9412 15.7049L17.9117 9.70492L16.5087 8.29492Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='23.8823' height='24' fill='%23242628'/%3E%3C/g%3E%3C/svg%3E%0A");
					position: absolute;
					right: 12px;
					top: 15px;
					float: none;
					height: auto;
					width: auto;
					margin: 0;
					transition: transform .15s linear;
				}

				+ div {
					margin-top: 30px;
					line-height: 1.8;
					font-size: 13px;
					font-weight: 400;
					display: none;

					table {
						border: none;
						box-shadow: none;
						tr {
							td {
								border-bottom: 1px solid $grey-color;
							}
							&:last-child td {
								border-bottom: none;
							}
						}
						th {
							font-weight: 600;
							font-size: 13px;
							color: $dark-color;
						}
						th:first-child,
						td:first-child {
							padding-left: 0;
						}
						th:last-child,
						td:last-child {
							padding-right: 0;
						}
						.good {
							color: $green-color;
						}
						.bad {
							color: $orange-color;
						}
					}

					&#demo-import-advanced-settings {
						ul > li {
							position: relative;
							margin-bottom: 15px;

							h5 {
								font-size: 13px;
								font-weight: 400;
								margin: 0;
							}
							span[data-toggle-tooltip] {
								display: inline-block;
								vertical-align: middle;
								margin-left: 10px;
								cursor: pointer;
								padding: 5px 10px 5px 0;
								line-height: 0;
								
								&::before {
									content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.33333 3.66634H7.66666V4.99967H6.33333V3.66634ZM6.33333 6.33301H7.66666V10.333H6.33333V6.33301ZM7 0.333008C3.31999 0.333008 0.333328 3.31967 0.333328 6.99967C0.333328 10.6797 3.31999 13.6663 7 13.6663C10.68 13.6663 13.6667 10.6797 13.6667 6.99967C13.6667 3.31967 10.68 0.333008 7 0.333008ZM7 12.333C4.06 12.333 1.66666 9.93967 1.66666 6.99967C1.66666 4.05967 4.06 1.66634 7 1.66634C9.93999 1.66634 12.3333 4.05967 12.3333 6.99967C12.3333 9.93967 9.93999 12.333 7 12.333Z' fill='%233496FF'/%3E%3C/svg%3E%0A");
									height: auto;
									width: auto;
									margin: 0;
								}
							}
							.wpzoom-tooltip {
								position: absolute;
								margin: 0;
								right: 0;
								top: 0;
								z-index: -1;
								padding: 7px;
								border-radius: 2px;
								overflow: hidden;
								max-width: 40%;
								visibility: hidden;
								opacity: 0;
								color: $light-color;
								background-color: rgba(0, 0, 0, 0.8);
								transition: opacity .2s ease-in, visibility .2s ease-in, z-index .2s linear;

								&.wpzoom-show-tooltip {
									opacity: 1;
									visibility: visible;
									z-index: 1;
								}
							}
							&#wpzoom-demo-importer_copy-data-to-child-theme,
							&#wpzoom-demo-importer_delete-wp-defaults {
								padding-bottom: 15px;
								border-bottom: 1px solid $grey-color;
							}
						}
					}
				}
			}

			&.toggle-open {
				label {
					&::after {
						transform: rotate(-180deg);
					}

					+ div {
						display: block;
						cursor: initial;
					}
				}
			}

			&:hover {
				border-color: $primary-color;
				cursor: pointer;
			}
		}
	}
}

.#{$prefix}demo-import-modal-footer {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding-top: 30px;
	border-top: 1px solid #dddddd;
	background-color: $light-color;

	.#{$prefix}demo-import-percent {
		display: inline-flex;
		align-items: center;
		color: $dark-color;
		padding: 3px 13px;
		border: none;
		margin: 0;

		dfn {
			display: block;
		}
		.#{$prefix}dot-elastic {
			display: none;
			background-color: #a7aaad;
			width: 7px;
			height: 7px;

			&::before,
			&::after {
				background-color: #a7aaad;
				width: 7px;
				height: 7px;
			}
		}

		&[data-progress-loading="0%"] {
			dfn {
				display: none;
			}
			.#{$prefix}dot-elastic {
				display: block;
			}
		}

		span {
			display: inline-block;
			margin-left: 5px;
		}
	}

	.#{$prefix}demo-import-view-site {
		&::after {
			content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4444 12.4444H1.55556V1.55556H7V0H1.55556C0.692222 0 0 0.7 0 1.55556V12.4444C0 13.3 0.692222 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V7H12.4444V12.4444ZM8.55556 0V1.55556H11.3478L3.70222 9.20111L4.79889 10.2978L12.4444 2.65222V5.44444H14V0H8.55556Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
			display: inline-block;
            float: none;
            height: auto;
            width: auto;
            margin: 0;
			margin-left: 10px;
			font-size: 0;
		}
	}
	.#{$prefix}demo-import-buttons-group {
		.button {
			margin-right: 15px;

			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.#{$prefix}snapshots-table {
	background: $light-color;
    border: 1px solid $grey-color;
    box-sizing: border-box;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
	padding: 0 30px;
	color: $dark-color;

	tr {
		th {
			border-bottom: 1px solid $dark-grey-color;
			font-weight: 600;
			vertical-align: middle;
		}
		td {
			border-bottom: 1px solid $grey-color;
			vertical-align: middle;
		}

		td, th {
			color: inherit;
			padding-top: 18px;
			padding-bottom: 18px;

			&:first-child {
				padding-left: 0;
			}
			&:last-child {
				padding-right: 0;
			}
		}

		&:last-child {
			td {
				border-bottom: 0;
			}
		}
	}

	a.button-toggle-dropdown-actions {
		position: relative;
		&::before {
			content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z' fill='%23242628'/%3E%3C/svg%3E%0A");
			z-index: 1;
			font-size: 0;
		}
	}
	.#{$prefix}snapshot-row {
		.text-right {
			position: relative;
		}
	}
	.#{$prefix}snapshot-dropdown-actions {
		position: absolute;
		width: 190px;
		height: auto;
		text-align: left;
		right: 0;
		top: 60px;
		padding: 15px 25px;
		background-color: #fff;
		border-radius: 3px;
		z-index: 2;
		box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.1);
		display: none;

		&.shown {
			display: block;
		}

		a.dropdown-actions-item {
			display: block;
			margin-bottom: 10px;
			line-height: 1.8em;
			font-size: 13px;
			color: inherit;

			&:hover {
				color: $dark-blue-color;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

@media screen and (max-width: 782px) {
	.#{$prefix}snapshots-table {
		tr {
			td, th {
				display: none;
	
				&:first-child {
					display: table-cell;
				}
				&:last-child {
					display: table-cell;
				}
			}
		}
	}
}