//
// ATUM Export Steps
// -----------------

.export-steps {
	height: 80%;
	display: flex;
	text-align: left;
	flex-direction: column;
	
	@include mobile-min {
		flex-direction: row;
	}
}

.export-step {
	display: flex;
	align-items: center;
	flex: 1 0 0;
	
	.step-number {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		color: $white;
		line-height: 51px;
		width: 51px;
		height: 51px;
		background-color: color("gray-light");
		border-radius: 100%;
		position: relative;
		
		.atum-icon {
			display: none;
			@include vertical-align-absolute;
			left: 0;
			right: 0;
		}
	}
	
	.step-text {
		margin: 0 10px;
		font-size: 12px;
		color: color("gray-light");
		
		h3 {
			font-size: 24px;
			color: color("gray-light");
			margin: 0 0 2px 0;
		}
	}
	
	&.current, &.completed {
		
		.step-number {
			background-color: $success;
		}
		
		.step-text {
			color: color("gray");
			
			h3 {
				color: $success;
			}
		}
		
	}
	
	&.completed {
		
		.step-number {
			span {
				display: none;
			}
			
			.atum-icon {
				display: block;
			}
		}
		
	}
	
}

.export-progress {
	
	.complete {
		height: 20%;
		position: relative;
		
		.progress {
			position: absolute;
			width: 100%;
			bottom: 5px;
		}
		
		.progress-bar {
			background-color: $success;
		}
	}
	
}

@include mobile-min {
	
	.export-steps {
		height: 66%;
	}
	
	.export-progress {
		.complete {
			height: 34%;
		}
	}
	
}