@import "colors";
@import "breakpoints";

.steps {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;

	.step-circle {
		background-color: $musare_color_light_gray;
		border-radius: 100%;
		color: $musare_color_white;
	}

	.step-circle-active {
		background-color: $musare_color_primary_blue;
	}

	.step-line {
		background-color: $musare_color_light_gray;
	}
}

@include responsive(smallest) {
	$circle_diameter: 36px;

	.steps {
		margin-bottom: 16px;

		.step-circle {
			width: $circle_diameter;
			height: $circle_diameter;
			line-height: $circle_diameter;
			text-align: center;
		}

		.step-line {
			width: calc(50% - #{$circle_diameter * 1.5});
			height: 1px;
		}
	}
}

@include responsive(small) {

}

@include responsive(medium) {

}

@include responsive(large) {

}

@include responsive(largest) {

}