@import "compass"
.step-in-progress
	animation: none !important

.onboarding-action-container
	.quick-start-button
		margin-left: 1em

.onboarding
	*
		box-sizing: border-box!important
	&.minimized
		.overlay
			display: none
		.onboarding-steps
			top: -560px
	.overlay
		display: block
		width: 100%
		height: 100%
		z-index: 7000
		position: fixed
		top: 0
		left: 0
		background: rgba(0,0,0,0.5)
	.panel
		position: absolute
		top: -5px
		left: 0
		right: 0
		width: 800px
		height: 540px
		margin: 0 auto
		z-index: 8000
		border: none
		@include box-shadow(0 0 16px black)
		&.final
			height: 350px
		.onboarding-intro
			border-bottom: solid 1px #E4E5E7
			height: 70px
			h3
				font-family: 'Open Sans'
				font-weight: 300
				font-size: 28px
				line-height: 50px
		.steps-list-container
			float: left
			width: 535px
			height: 450px
			padding: 30px 20px 0
			border-right: solid 1px #E4E5E7
			.steps-list
				margin: 0
				padding: 0
				list-style: none
				counter-reset: onboardingSteps
				li
					counter-increment: onboardingSteps
					content: counter(onboardingSteps)
					position: relative
					font-size: 18px
					margin-bottom: 30px
					padding-left: 55px
					.title
						display: block
					.desc
						display: block
						font-size: 13px
					&:before
						display: block
						width: 40px
						height: 40px
						position: absolute
						left: 6px
						top: 0
						border: 1px solid #97A9B0
						content: counter(onboardingSteps)
						text-align: center
						font-size: 22px
						line-height: 38px
						@include border-radius(50%)
					&.checked
						.title
							color: #aaa
						&:before
							display: block
							width: 40px
							height: 40px
							position: absolute
							left: 6px
							top: 0
							border: none
							color: white
							font-family: FontAwesome
							line-height: 40px
							content: '\f00c'
							background-color: #8BC954
					&.active
						.title
							font-size: 24px
							margin-bottom: 8px
					&.inactive
						.title
							color: #ccc
							line-height: 40px
						&:before
							color: #ccc
							border-color: #ccc
			.step-launch
				padding: 0 80px
				margin-top: 50px
		.steps-animation-container
			float: right
			width: 265px
			height: 386px
			border-bottom: solid 1px #E4E5E7
			.step-before-launch
				line-height: 65px
		.final-container
			float: left
			width: 800px
			padding: 30px 20px 0
			.title
				display: block

	.close-button
		position: absolute
		top: 30px
		right: 20px
		color: #ccc
		i
			font-size: 28px
	.skip
		position: relative
		top : -20px
		left : 10px