/* Process Steps
----------------------------------------------------------*/

.process-steps {
	position: relative;
	@include display-flex;
	@include flex-direction(row);
	list-style: none;
	padding: 0;
	margin: 0 0 40px 0;
	text-align: center;

	&:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 7px;
		@include border-radius(4px);
		background: $color-grey-2;
		content: ' ';
	}

	> li {
		position: relative;
		padding-top: 34px;
		@include flex-grow(1);
		font-weight: 600;

		&:before, &:after {
			position: absolute;
			@include border-radius(50%);
			@include translate3d(-50%,0,0);
			content: ' ';
		}

		&:before {
			top: -9px;
			left: 50%;
			width: 26px;
			height: 26px;
			background: $color-grey-2;
		}

		&:after {
			top: -4px;
			left: 50%;
			width: 16px;
			height: 16px;
			background: $color-primary;
			visibility: hidden;
			font-size: 11px;
			padding-top: 3px;
			color: $color-white;
		}

		&.active:after {
			visibility: visible;
		}
		&.done:after {
			top: -6px;
			width: 20px;
			height: 20px;
			font-family: themify;
			content:"\e64c";
			visibility: visible;
		}
	}
}

.dark .process-steps {
	&:before, > li:before {
		background: $color-white;
	}
}