//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

.Vlt-steps {
	counter-reset: steps;
	display: inline-flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	overflow: visible;
	padding: 0;

	&--black {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $black;
					border-color: $black;
				}
			}
		}
	}

	&--grey {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $grey;
					border-color: $grey;
				}
			}
		}
	}

	&--white {
		.Vlt-steps__item {
			&:before {
				border-color: $white;
				color: $white;
			}

			&--selected,
			&_selected {
				&:before {
					background: $white;
					color: $black;
				}
			}
		}
	}

	&--orange {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $orange;
					border-color: $orange;
				}
			}
		}
	}

	&--blue {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $blue;
					border-color: $blue;
				}
			}
		}
	}

	&--red {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $red;
					border-color: $red;
				}
			}
		}
	}

	&--green {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $green;
					border-color: $green;
				}
			}
		}
	}

	&--purple {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $purple;
					border-color: $purple;
				}
			}
		}
	}

	&--yellow {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $yellow;
					border-color: $yellow;
				}
			}
		}
	}

	&--indigo {
		.Vlt-steps__item {
			&--selected,
			&_selected {
				&:before {
					background: $indigo;
					border-color: $indigo;
				}
			}
		}
	}

	&__item {
		align-items: center;
		color: $black;
		counter-increment: steps;
		display: table;
		font-size: 14px;
		font-weight: 400;
		margin: 0 65px 0 0;
		position: relative;
		text-align: center;

		@media #{$S-only} {
			flex: 1;
			position: relative;
			text-align: center;
		}

		span {
			font-size: 1.1rem;
			font-weight: 400;
			left: 50%;
			line-height: 1.5rem;
			margin-top: 4px;
			position: absolute;
			transform: translateX(-50%);
			white-space: nowrap;
		}

		&:first-child {
			margin-left: 0;
		}

		a {
			color: $black;
		}

  		&:before {
  			align-items: center;
			border: 1px solid;
			border-color: $black;
			border-radius: 100%;
			color: $black;
			content: counter(steps);
			display: flex;
			flex: 0 0 40px;
			font-size: 14px;
			height: 40px;
			justify-content: center;
			margin: 0 auto;;
			width: 40px;
  		}

  		&:after {
			$fill-color: encode-hex-code($black);
			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0)%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M9.55892%204.05952C9.89391%203.81589%2010.363%203.88995%2010.6066%204.22494L15.9399%2011.5583C16.1312%2011.8213%2016.1312%2012.1775%2015.9399%2012.4405L10.6066%2019.7739C10.363%2020.1089%209.89391%2020.1829%209.55892%2019.9393C9.22393%2019.6957%209.14987%2019.2266%209.3935%2018.8916L14.406%2011.9994L9.3935%205.1072C9.14987%204.77221%209.22393%204.30315%209.55892%204.05952Z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0%22%3E%0A%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			height: 24px;
			position: absolute;
			right: -45px;
			top: 8px;
			width: 24px;
		}

		&:last-child {
			margin-right: 0;

			&:after {
				display: none;
			}
		}

		&--selected,
		&_selected {
			&:before {
				background: $black;
				color: $white;
				font-weight: 400;
			}
		}

		&_done {
			&:before {
				background-color: $grey;
				background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2.904%2012.11L1.5%2013.52%207.958%2020%2022.5%205.409%2021.096%204%207.958%2017.182z%22%2F%3E%3C%2Fsvg%3E');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 20px 20px;
				border: 0;
				content: '';
			}

			&:after {
				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23C4CDD5%3B%22%20d%3D%22M13.5%2C12l-5.2%2C5.4c-0.3%2C0.4-0.3%2C0.9%2C0%2C1.3c0.3%2C0.3%2C0.9%2C0.4%2C1.2%2C0c0%2C0%2C0%2C0%2C0%2C0L16%2C12L9.5%2C5.3%0D%0A%09c-0.3-0.3-0.9-0.4-1.2%2C0c0%2C0%2C0%2C0%2C0%2C0c-0.3%2C0.4-0.3%2C0.9%2C0%2C1.3L13.5%2C12z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
			}
		}
	}
}