//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables


@-webkit-keyframes "changeBackground" {
	from {
		background: $gray;
	}
	to {
		background: $color_59;
	}
}
@keyframes "changeBackground" {
	from {
		background: $gray;
	}
	to {
		background: $color_59;
	}
}
/* A totally custom override */
/* Demo for vertical bars */
ul.step-progress-bar {
	width: 100%;
	margin: $m-0;
	padding: $p-0;
	font-size: 0;
	list-style: none;
}
li.section {
	display: inline-block;
	padding-top: 100px;
	font-size: 14px;
	color: $color_2;
	vertical-align: $v-align-top;
	position: $pos-rel;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	&:before {
		font-family: "flaticon";
	    content: "\e942";
		position: $pos-abs;
		top: 2px;
		left: calc(41% - 15px);
		z-index: 1;
		width: 70px;
		height: 70px;
		color: #2b293d;
		border: $b-width-2 $solid $white;
		border-radius: 50%;
		line-height: 68px;
		background: $light-gray;
	}
}
.status-bar {
	height: 2px;
	background: $color_6;
	position: $pos-rel;
	top: 44px;
	margin: $m-0 auto;
}
.current-status {
	height: 2px;
	width: 0;
	border-radius: 1px;
	background: $color_59;
}
li.section.visited {
	&:before {
		font-family: "flaticon";
	    content: "\e9c1";
		animation: changeBackground .5s linear;
		animation-fill-mode: forwards;
		font-size: 20px;
	    color: #fff;
	}
}
li.section.visited.current {
	&:before {
		box-shadow: 0 0 0 0px #18d17f;
	}
}
.progress-bar {
	background-color: $white;
	box-shadow: inset 0 0px 0 rgba(0,0,0,.15);
}
.progress-indicator.custom-complex {
	background-color: $color_98;
	padding: 10px 5px;
	border: $b-width-1 $solid $color_118;
	border-radius: 10px;
	>li {
		.bubble {
			height: 12px;
			width: 100%;
			border-radius: 2px;
			box-shadow: inset -5px 0 12px rgba(0, 0, 0, 0.2);
			&:before {
				display: none;
			}
			&:after {
				display: none;
			}
		}
	}
}
.progress-indicator.stepped.stacked {
	width: 48%;
	display: inline-block;
	>li {
		height: 150px;
		.bubble {
			padding: 0.1em;
		}
		&:first-of-type {
			.bubble {
				padding: 0.5em;
			}
		}
		&:last-of-type {
			.bubble {
				padding: 0em;
			}
		}
	}
}
@media screen and (max-width: 991px) {
	.progress-indicator.stacked {
		>li {
			text-indent: 0px;
		}
	}
	.progress-indicator.horizontal-step {
		>li {
			font-size: 10px;
		}
	}
	.status-bar {
		top: 26px;
	}
	li.section {
		padding-top: 50px;
		font-size: 12px;
		&::before {
			font-family: "flaticon";
	        content: "\e942";
			position: $pos-abs;
			top: 2px;
			left: calc(41% - 15px);
			z-index: 1;
			width: 40px;
			height: 40px;
			color: $white;
			border: $b-width-2 $solid $white;
			border-radius: 50%;
			line-height: 35px;
			background: #9a9a9a;
		}
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	li.section {
		font-size: 12px;
	}
}