@import "stepper";

$base-index: 100000;

.migration .modal-body .loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 30px auto;
	width: auto;
	color: #fff;

	h3 {
		margin: 20px 0 0;
	}

	svg {
		padding: 10px;
		background-color: $warning;
		border-radius: 100%;
		animation-name: spin;
		animation-duration: 2000ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
}

.ob-import-modal {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	.components-modal__content:before{
		display:none;
	}
	.components-modal__header {
		border: none;

		h1 {
			font-size: 18px;
			font-weight: 700;
		}
	}

	.header {
		margin-bottom: 15px;

		h1 {
			margin-top: 0;
			font-size: 18px;
			font-weight: 700;
			color: #000;
			line-height: normal;
			margin-bottom: 10px;
		}

		p.description {
			font-size: 14px;
			line-height: 24px;
			color: #333;
		}
	}

	//.components-tooltip {
	//	display: none;
	//}

	.modal-body {
		h3 {
			margin: 0;
			display: flex;
			align-items: center;

			svg {
				margin-right: 5px;
			}
		}
	}

	.well {
		margin: 0;
		padding: 20px 10px;
		border-radius: 6px;
		color: #616161;
		background-color: rgba(249, 215, 128, 0.24);

		ol {
			padding: 0;
			margin: 20px 0 0 20px;

			li {
				margin-bottom: 10px;
				font-size: 14px;

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

		ul {
			margin: 0 0 0 20px;
			padding: 0;
			list-style: disc;

			li {
				font-size: 14px;
				margin-bottom: 10px;
				font-weight: 400;


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

		&.error {
			background-color: lighten($error, 27);
		}

		&.warning {
			background-color: lighten($warning, 27);
		}
	}

	hr {
		margin: 25px 0;
		border: none;
		border-top: 1px solid $grey;
		height: 0;
	}

	.import-result {
		font-size: 14px;
	}

	.modal-body {
		padding-bottom: 52px;

		.plugin-summary {
			display: flex;
			flex-direction: row;
			align-items: center;
			.tiob-tooltip-content {
				left: 25px;
				top: 0;
			}
		}

		.tpc-subscribe-email-text {
			font-size: 14px;
			margin-top: 20px;
		}
		.tpc-email-input {
			margin-bottom: 60px;
			input {
				padding: 12px;
				font-size: 13px;
				color: #2C3338;
				border-radius: 2px;
			}
		}
	}

	.modal-footer {
		margin-top: 25px;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		background: #fff;
		width: calc( 100% - 72px );
		padding: 12px 36px;
		z-index: 10;
		left: 0;
		border-top: 1px solid #d9d9d9;

		-webkit-box-shadow: 0px -24px 12px 0px rgba(255,255,255,0.8);
		box-shadow: 0px -24px 12px 0px rgba(255,255,255,0.8);

		.import {
			padding: 10px 30px;
			margin-left: auto;
			font-weight: 600;
			font-size: 14px;
			height: auto;
			border-radius: 4px;
		}


	button, a {
			&:last-child {
				margin-left: auto;

				&:only-child {
					margin-left: auto;
				}
			}
		}
	}
}

.ob-import-modal.fetching {
	//pointer-events: none;

	.title {
		width: 200px;
		display: block;
	}

	.is-loading {
		border-radius: 3px;
		animation: 1.5s loading-placeholder ease-in-out infinite;
		background-color: $black;
		height: 20px;

		&.button {
			background-color: #007cba;
			height: 39px;
		}

		&.link {
			width: 100px;
			background-color: #007cba;
		}
	}

	.well {
		animation: 1.5s loading-placeholder-high-opacity ease-in-out infinite;
		height: inherit !important;
		background-color: inherit !important;

		h3 {
			span {
				width: 100px;
			}
		}

		ol {
			list-style: square;
		}

		li {
			border-radius: 3px;
			width: 75%;
			height: 18px;
			margin-top: 0;
			background-color: $black;
			animation: 1.5s loading-placeholder ease-in-out infinite;

			&:nth-child(2) {
				width: 85%;
			}

			&:nth-child(3) {
				width: 95%;
			}
		}
	}

	.mock-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.options {
		h3 {
			max-width: 100px;
		}

		li {
			.mock-icon {
				background-color: $blue;
				margin-right: 15px;
			}

			span {
				width: 100px;
			}

			.toggle {
				width: 40px;
				background-color: $blue;
				border-radius: 50px;
				margin-left: auto;
			}
		}
	}

	.modal-footer button {
		width: 90px;
		height: 35px;
		background-color: $dark-grey;
		border: none !important;

		&.is-primary {
			background-color: $blue;
		}
	}
}

.modal-toggles {
	margin-top: 10px;
	border: none;

	.options {
		border: none;
		padding: 10px;

		.components-panel__body-title {
			margin: -10px -10px 0 -10px !important;
		}

		button {
			font-size: 16px;
			font-weight: 700;
			line-height: 30px;
		}
	}

	.option-row {
		justify-content: flex-start;
		border-bottom: 1px solid transparentize($black, .9);
		margin: 0;
		padding: 8px 0;
		display: flex;
		align-items: center;

		span {
			font-size: 14px;
			margin-left: 10px;
			color: $black;
		}

		.actions {
			margin-left: auto;
		}

		.dashicon {
			margin-left: 10px;
			color: #888888;
			font-size: 18px;
			display: flex;
			align-items: center;
		}

		&.active .dashicon {
			color: $blue;
		}

		.toggle-wrapper {
			margin-left: auto;

			.components-form-toggle {
				margin: 0;
			}
		}
	}
}

.import-done-actions {
	display: flex;
	align-items: center;
	width: 100%;
	flex-direction: column-reverse;
	gap: 10px;
	padding: 12px 0;

	.components-button.is-secondary {
		margin-left: auto;
		border: 2px solid;
		padding: 8px 20px;
		font-weight: 600;
		font-size: 14px;
		height: auto;
		border-radius: 4px;
	}

	.import {
		margin-left: 0 !important;
	}
	.import-full-w {
		width: 100%;
		justify-content: center;
		padding: 12px 30px;
	}
	.is-grayed {
		color: #757575;
	}
}