Progress Meter

.progress-meter {
	min-width: 50rem;
	max-width: 100rem;
	margin-top: 3rem !important;

	&.-init {
		.progress-item {
			&::before, &::after {
				transition: none;
			}

			&::before {
				height: 0;
			}

			&::after {
				opacity: 0;
			}
		}
	}

	.progress-list {

	}

	.progress-item {
		position: relative;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		padding: 3.5rem 4rem 3.5rem 12rem;

		border-radius: 0.5rem;

		text-decoration: none;

		&:last-child {
			&::before {
				display: none;
			}
		}

		&.-show-sections {
			.sub-list {
				display: block;
			}
		}

		&.-active {
			background: white;

			.sub-list {
				display: block;
			}
		}

		&:not(.-subitem) {
			.progress-title {
				@include font-size-other(14px);

				.link {
					line-height: 1.5em;

					&::after {
						height: 2px;
					}
				}
			}
		}

		&.-subitem {
			.progress-title {
				opacity: 0.7;
			}
		}

		$status: 'completed', 'draft', 'progress', 'unstarted';
		$statusColor: $color-irma-grass, $color-irma-goldenrod, $color-irma-ocean, $color-irma-stone;
		$statusIcon: '\f00c', '\f141', '\f141', '\f111';

		@for $i from 1 through 4 {
			&[data-status=#{nth($status, $i)}] {
				&.-active {
					box-shadow: 0 0 0 1px nth($statusColor, $i);
				}

				&::before, &::after {
					background: nth($statusColor, $i);
				}

				&::after {
					content: nth($statusIcon, $i);
				}

				.progress-status {
					color: nth($statusColor, $i);
				}
			}
		}

		&::before, &::after {
			z-index: 1;

			// transition: all 0.4s;
		}

		// @for $i from 1 through 16 {
		// 	&:nth-child(#{$i}) {
		// 		&::before, &::after {
		// 			transition-delay: #{$i * 0.25}s;
		// 		}
		// 	}
		// }

		&[data-status='unstarted'] {
			&::after {
				font-size: 2.5rem;
			}
		}

		&::before {
			content: '';

			position: absolute;
			top: 9rem;
			left: 6rem;
			transform: translateX(-50%);

			display: block;
			height: 100%;
			width: 5px;

			box-shadow: 0 0 0 2px white;
		}

		&::after {
			position: absolute;
			top: 9rem;
			left: 6rem;
			transform: translate(-50%, -50%);

			display: flex;
			justify-content: center;
			align-items: center; 
			width: 7.5rem;
			height: 7.5rem;

			color: white;
			border-radius: 50%;

			@include font-icon;
			font-size: 3.5rem;
			line-height: 0;
		}

		.progress-title {
			@include font-primary-semibold;

			a {
				color: inherit;
			}
		}

		.progress-info {
			// margin-top: 1rem;
		}

		.progress-status {
			@include font-primary-semibold;
		}

		.progress-date {
			margin-left: 1rem;

			opacity: 0.7;
		}

		.sub-list {
			display: none;
		}

		.person-list {
			.person-item {
				margin-top: 1rem;

				@for $i from 1 through 4 {
					&[data-status=#{nth($status, $i)}] {
						.text, .link {
							&::before {
								background: nth($statusColor, $i);
							}
						}
					}
				}

				&:not([data-status]) {
					.link, .text {
						&::before {
							content: '\f007';

							position: absolute;
							left: -4rem;
							top: 50%;
							transform: translateY(-50%);

							@include font-icon;
							font-weight: normal;
						}
					}
				}

				&[data-status] {
					.link, .text {
						&::before {
							content: '';

							position: absolute;
							left: -4rem;
							top: 50%;
							transform: translateY(-50%);

							display: block;
							width: 2rem;
							height: 2rem;

							border-radius: 50%;
						}
					}
				}
			}

			.link, .text {
				margin-left: 4rem;
				@include font-primary-semibold;

				line-height: 1.6em;

				&::after {
					bottom: 0.1em;
					height: 2px;
				}
			}
		}
	}
}