/**
 * Step for installer
 */

.step {
	width: 100%;
	.bar {
		position: relative;
		top: -9px;
		.background, .loader {
			position: absolute;
			top: 0;
			height: 4px;
		}
		.background {
			width: 100%;
			background: #d6d6d6;
		}
		.loader {
			width: 0%;
			background: $color__green;
			transition: all 0.1s linear;
		}
	}
	.step-list {
		width: 100%;
		display: flex;
		.step {
			&:after {
				position: relative;
				z-index: 90;
				display: block;
				margin: auto;
				content: '';
				width: 14px;
				height: 14px;
				background: #d6d6d6;
				border-radius: 50%;
				transition: all 0.2s ease-out;
			}
			.title {
				display: block;
				text-align: center;
				margin: auto;
				color: rgba(0,0,0,0.3);
				font-size: 14px;
				max-width: 160px;
				font-weight: 600;
				padding-bottom: 10px;
				transition: all 0.2s ease-out;
				min-height: 45px;
			}
			&:first-child {
				&:after, .title {
					margin: 0 auto 0 0;
					text-align: left;
				}
			}
			&:last-child {
				&:after, .title {
					margin: 0 0 0 auto;
					text-align: right;
				}
			}
			&.active {
				&:after {
					background: $color__green !important;
				}
				.title {
					color: $color__green;
				}
			}
		}
		&:after {
			display: block;
			content: '';
			clear: both;
		}
	}
}

.step.install {
	margin: 20px auto;
	max-width: 1200px;
	.step-list {
		.step {
			&:first-child { width: 12.5%; }
			&:nth-of-type(2) { width: 25%; }
			&:nth-of-type(3) { width: 25%; }
			&:nth-of-type(4) { width: 25%; }
			&:last-child { width: 12.5%; }
		}
	}
}

@media screen and (max-width: 1080px) {
	.step {
		.step-list {
			.step .title {
				font-size: 10px;
			}
		}
	}
}