@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 {
		padding: 0 30px 40px;
	}
	.components-modal__header {
		border: none;
		margin-bottom: 10px !important;
	}

	.header {
		margin-bottom: 15px;

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

		p.description {
			font-size: 20px;
			line-height: 34px;
			color: #000;
		}
	}

	.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: 15px;

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

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

			li {
				font-size: 15px;
				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: 15px;
	}

	.modal-footer {
		margin-top: 25px;
		display: flex;
		align-items: center;

		.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: 19px;
			font-weight: 700;
			line-height: 30px;

			svg {
				width: 30px;
				height: 30px;
			}
		}
	}

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

		span {
			font-size: 15px;
			margin-left: 20px;
			color: $black;
		}

		.actions {
			margin-left: auto;
		}

		.dashicon {
			margin-left: 10px;
			fill: #d9d9d9;

			&.active {
				fill: $blue;
			}
		}

		.toggle-wrapper {
			margin-left: auto;

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

.import-done-actions {
	display: flex;
	align-items: center;
	width: 100%;

	.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: 20px !important;
	}
}