@import 'vars.scss';

.ws-theme-wizard {
	background: $bodyColor;
	color: $textColor;
	padding: 30px;
	border: 1px solid $bordersColor;
	font-size: $fontSize;
	line-height: 19px;
	max-width: 1220px;

	.notice,
	.updated {
		display: none !important;
	}

	h2 {
		margin: 0 0 15px;
		padding: 0 0 15px;
		font-size: 24px;
		line-height: 1em;
		color: $textColorAlt;
		border-bottom: 1px solid $bordersColor;
	}
	h4 {
		font-size: 20px;
		line-height: 27px;
		padding: 0 0 10px;
		margin: 0;
		color: $textColorAlt;
	}
	h5 {
		margin: 0;
		padding: 0 0 10px;
		font-size: 14px;
		line-height: 20px;
		color: $textColorAlt;
	}

	.desc {
		padding: 0 0 15px;
	}

	.theme-wizard-form {
		&__row {
			padding: 0 0 20px;
			position: relative;
			label {
				display: block;
				color: $textColorAlt;
				font-weight: bold;
				margin: 0 0 5px;
			}
			input[type="text"] {
				display: block;
				width: 100%;
				max-width: 400px;
			}
		}
	}

	input[type="text"] {
		color: $textColorAlt;
		background-color: $innerBoxColor;
		border-radius: 2px;
		padding: 5px;
		min-height: 28px;
		border: 1px solid $bordersColor;
		box-shadow: none;
		&.wizard-error {
			border-color: $dangerColor;
		}
	}

	.wizard-error-message {
		color: $dangerColor;
		position: absolute;
		position: absolute;
		font-size: 11px;
		margin: -3px 0 0 -2px;
	}

	.btn {
		position: relative;
		display: inline-block;
		font-size: 11px;
		line-height: 18px;
		text-decoration: none;
		padding: 4px 22px;
		color: $textColorAlt;
		text-transform: uppercase;
		border-radius: 4px;
		border-width: 1px;
		border-style: solid;
		outline: none;
		cursor: pointer;
		transition: all 200ms linear;
		border-color: $normal_outset_1 $normal_outset_2 $normal_outset_2 $normal_outset_1;
		background-color: $normal_gradint_2;
		&:before {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 4px;
			background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
			content: '';
		}

		&:hover {
			&:before {
				background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
			}
		}

		&:active {
			&:before {
				opacity: 0;
			}
		}
		&.btn-primary {
			border-color: $primary_outset_1 $primary_outset_2 $primary_outset_2 $primary_outset_1;
			background-color: $primary_gradint_2;
			color: #fff;
			&.disabled {
				background: lighten( $primaryColor, 10% );
				cursor: default;
			}
		}
		&.btn-success {
			color: #fff;
			border-color: $success_outset_1 $success_outset_2 $success_outset_2 $success_outset_1;
			background-color: $success_gradint_2;
		}
		&.btn-danger {
			color: #fff;
			border-color: $danger_outset_1 $danger_outset_2 $danger_outset_2 $danger_outset_1;
			background-color: $danger_gradint_2;
		}
		&.btn-warning {
			color: #fff;
			border-color: $warning_outset_1 $warning_outset_2 $warning_outset_2 $warning_outset_1;
			background-color: $warning_gradint_2;
		}
		.dashicons,
		.dashicons-before::before {
			vertical-align: bottom;
			margin: 0 0 0 -5px;
		}
		&.in-progress {
			.text {
				opacity: 0;
			}
			.theme-wizard-loader__spinner {
				opacity: 1;
			}
		}
	}

	.wizard-log {
		padding: 20px 0 0 0;
	}

	.theme-wizard-radio {
		border: 1px solid $bordersColor;
		border-radius: 5px;
		display: block;
		padding: 20px 20px 20px 47px;
		margin: 0 0 10px;
		font-size: 14px;
		color: $textColorAlt;
		position: relative;
		display: flex;
		> * {
			position: relative;
			z-index: 2;
		}

		input[type="radio"] {
			position: absolute;
			left: 20px;
			top: 27px;
		}

		&__mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: $innerBoxColor;
			transition: all 200ms linear;
			z-index: 1;
			opacity: 0;
		}
		&__label {
			&-title {
				display: block;
				padding: 0 0 5px;
			}
			&-desc {
				color: $textColor;
				font-size: 13px;
			}
		}
		&:hover .theme-wizard-radio__mask,
		input:checked + .theme-wizard-radio__mask {
			position: absolute;
			opacity: 1;
		}
	}
	.theme-wizard-radio-wrap {
		padding: 0 0 20px;
	}

	.mpack-themes {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		&__item {
			padding: 10px;
			flex: 0 0 290px;
			max-width: 290px;
			&-content {
				border: 1px solid $bordersColor;
				padding: 19px;
			}
			&-actions {
				display: flex;
				justify-content: space-between;
			}
		}
		.mpack-btn {
			display: inline-block;
			padding: 4px 15px 5px;
			font-size: 12px;
			line-height: 20px;
			text-transform: uppercase;
			border: none;
			outline: none;
			box-sizing: border-box;
			background: $primaryColor;
			color: #fff;
			cursor: pointer;
			vertical-align: top;
			border-radius: 3px;
			transition: all 200ms linear;
			text-decoration: none;
			position: relative;
			width: 116px;
			text-align: center;
			&:hover {
				background: $primaryColorAlt;
			}
			&.btn-default {
				background: none;
				border: 1px solid $primaryColor;
				padding: 3px 15px 4px;
				color: $primaryColor;
				&:hover {
					color: $defaultColor;
					border-color: $defaultColor;
				}
			}
		}
	}

}

.theme-wizard-loader {
	.btn & {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 14px;
		margin: -9px 0 0 -10px;
	}
	&__spinner {
		display: block;
		width: 100%;
		height: 100%;
		animation: spin .7s linear infinite;
		border: 2px solid #FFF;
		border-top: 2px solid #3498DB;
		border-radius: 50%;
		transition: opacity 300ms linear;
		opacity: 0;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}