// Onboarding Wizard
// -------------------------
.wizard__header {
	border-radius: 0 0 $border-radius $border-radius;
	padding: $m-sm;
	margin-bottom: $m-sm;
	background: $gray-900;
	min-height: 50px;
	text-align: center;
	@include media-breakpoint-up(sm) {
		background: $gray-900 url('../svg/banner-bg.svg') center right no-repeat;
		background-size: contain;
	}
}

@include media-breakpoint-up(sm) {
	.wizard__breadcrumbs-wrapper {
		padding: 0 $m-md;
	}
}
@include media-breakpoint-only(xs) {
	.wizard__breadcrumbs-wrapper {
		padding: 0 $m-xs;
	}
}

	.wizard__breadcrumbs-list {
		@include menu-mixin;
		justify-content: space-between;
		counter-reset: breadcrumbCounter;
		margin-bottom: $m-sm;
	}

		.wizard__breadcrumbs-item {
			counter-increment: breadcrumbCounter;
			display: flex;
			align-items: center;
			padding: 0 5px;
			@include media-breakpoint-up(md) {
				font-size: 1rem;
			}

			&:before {
				$box: 2rem;
				$box-small: 1.2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: $m-xs;
				content: counter(breadcrumbCounter);
				background: $primary;
				color: $white;
				border-radius: 50%;

				@include media-breakpoint-down(sm) {
					width: $box-small;
					height: $box-small;
				}

				@include media-breakpoint-up(md) {
					width: $box;
					height: $box;
				}
			}
		}


// Wizard Action Buttons
// -------------------------
.wizard__actionbutton-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
	.wizard__actionbutton {
		min-width: 200px;
		@include media-breakpoint-only(xs) {
			min-width: 40vw;
		}
	}

	.js-wizard-back {
		@extend .dashicon;
		display: flex;
		align-items: center;
		justify-content: center;
		&:before {
			content: "\f341";
		}
	}






// Animation transitions
// -------------------------
@mixin showPanel() {
	filter: blur(0);
	opacity: 1;
	display: block;
}
@mixin hidePanel() {
	filter: blur(10px);
	opacity: 0;
	display: none;
}

.wizard__body {
	position: relative;
	overflow: hidden;
	border-radius: $border-radius;
	margin-bottom: $m-sm;
	background-color: $white;
	min-height:500px;
}

.wizard__panel-wrapper {
	width: 100%;
	transition: 800ms all ease-in-out;
}

.wizard__panel {
	// @include hidePanel();
	// width: 100%;
	// display: none;
	transition: 200ms all linear;
	background-color: $white;

	@include media-breakpoint-up(sm) {
		padding: $m-sm $m-md;
	}
	@include media-breakpoint-only(xs) {
		padding: $m-sm;
		width: 100vw;
	}
}

.wizard__panel-loading {
	min-height: 200px;
}


#fireworks_wizard {
	// Loading State
	&[data-wizard-is-loading="true"] {
		.wizard__panel-wrapper {
			@include hidePanel();
		}
		.firework-spinner {
			display: block;
		}
	}

	&[data-wizard-panel="1"] {
		.wizard__panel:nth-child(1) {
			@include showPanel();
		}
		.wizard__breadcrumbs-item:nth-child(1) {
			color: $secondary;
			font-weight: bold;
		}
	}
	&[data-wizard-panel="2"] {
		.wizard__panel-wrapper {
			transform: translate3d(0, 0, 0);
		}
		.wizard__panel:nth-child(2) {
			@include showPanel();
		}
		.wizard__breadcrumbs-item:nth-child(2) {
			color: $secondary;
			font-weight: bold;
		}
	}
	&[data-wizard-panel="3"] {
		.wizard__panel-wrapper {
			transform: translate3d(-50%, 0, 0);
		}
		.wizard__panel:nth-child(3) {
			@include showPanel();
		}
		.wizard__breadcrumbs-item:nth-child(2) {
			color: $secondary;
			font-weight: bold;
		}
	}
	&[data-wizard-panel="4"] {
		.wizard__panel-wrapper {
			transform: translate3d(-75%, 0, 0);
		}
		.wizard__panel:nth-child(4) {
			@include showPanel();
		}
		.wizard__breadcrumbs-item:nth-child(3) {
			color: $secondary;
			font-weight: bold;
		}
	}
}