<commit_before>.progress-indicator {
	float: right;
	display: block;
	background: white;
	user-select: none;

	.state {
		$stateWidth: 30px;
		$stateHeight: 44px;
		$stateSpacing: 5px;
		$color: #78AAF3;
		$inactiveColor: #d7d7d7;

		display: inline-block;
		vertical-align: middle;
		min-width: $stateWidth;
		max-width: $stateWidth * 5;
		height: $stateHeight;
		background-color: $color;
		margin-right: $stateSpacing;
		position: relative;
		vertical-align: middle;
		line-height: $stateHeight - 3px;
		cursor: help;
		user-select: none;

		// first element (without left white arrow)
		&:first-child {
			.text {
				padding-left: $stateWidth * 0.55 !important;

				.effective {
					left: 53%;
				}
			}
		}
		// last element (arrow is absolute positioned)
		&:last-child {
			margin-right: $stateWidth * 0.8;
		}
		// every arrow (white & colored)
		&:not(:first-child):before,
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			width: 0;
			height: 0;
			border: $stateHeight/2 solid transparent;
			border-right: 0;
		}
		// all white arrows
		&:not(:first-child):before {
			border-left-color: white;
			left: 0;
			z-index: 9;
		}
		// all colored arrows
		&:after {
			border-left-color: $color;
			right: -($stateHeight/2 * 0.98);
			z-index: 10;
		}
		// all grey elements
		&.afterActive {
			background: $inactiveColor;
			&:after {
				border-left-color: $inactiveColor;
			}
		}
		&.active {
			cursor: default;
			&.rejected {
				background: #EF6B6B;
				&:after {
					border-left-color: #EF6B6B;
				}
			}
		}
		&:hover,
		&.active {
			.text {
				width: $stateWidth * 5;
				.effective {
					opacity: 1;
				}
			}
		}
		.text {
			width: 0;
			text-transform: uppercase;
			font-size: 80%;
			transition: all 0.5s ease;
			transition-delay: 0.3s;
			height: $stateHeight;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 1.3;
			color: white;
			padding-left: $stateWidth;
			padding-right: $stateWidth / 3;
			overflow: hidden;
			position: relative;
		}
		.text .effective {
			position: absolute;
			width: $stateWidth * 5;
			top: 50%;
			left: 58%;
			transform: translate(-50%, -50%);
			transition: opacity 0.3s ease;
			transition-delay: 0.4s;
			opacity: 0;
			user-select: all;
		}
	}
	// clear floating afterwards
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}<commit_msg>short progress indicator delay<commit_after>.progress-indicator {
	float: right;
	display: block;
	background: white;
	user-select: none;

	.state {
		$stateWidth: 30px;
		$stateHeight: 44px;
		$stateSpacing: 5px;
		$color: #78AAF3;
		$inactiveColor: #d7d7d7;

		display: inline-block;
		vertical-align: middle;
		min-width: $stateWidth;
		max-width: $stateWidth * 5;
		height: $stateHeight;
		background-color: $color;
		margin-right: $stateSpacing;
		position: relative;
		vertical-align: middle;
		line-height: $stateHeight - 3px;
		cursor: help;
		user-select: none;

		// first element (without left white arrow)
		&:first-child {
			.text {
				padding-left: $stateWidth * 0.55 !important;

				.effective {
					left: 53%;
				}
			}
		}
		// last element (arrow is absolute positioned)
		&:last-child {
			margin-right: $stateWidth * 0.8;
		}
		// every arrow (white & colored)
		&:not(:first-child):before,
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			width: 0;
			height: 0;
			border: $stateHeight/2 solid transparent;
			border-right: 0;
		}
		// all white arrows
		&:not(:first-child):before {
			border-left-color: white;
			left: 0;
			z-index: 9;
		}
		// all colored arrows
		&:after {
			border-left-color: $color;
			right: -($stateHeight/2 * 0.98);
			z-index: 10;
		}
		// all grey elements
		&.afterActive {
			background: $inactiveColor;
			&:after {
				border-left-color: $inactiveColor;
			}
		}
		&.active {
			cursor: default;
			&.rejected {
				background: #EF6B6B;
				&:after {
					border-left-color: #EF6B6B;
				}
			}
		}
		&:hover,
		&.active {
			.text {
				width: $stateWidth * 5;
				.effective {
					opacity: 1;
				}
			}
		}
		.text {
			width: 0;
			text-transform: uppercase;
			font-size: 80%;
			transition: all 0.5s ease;
			transition-delay: 0.15s;
			height: $stateHeight;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			line-height: 1.3;
			color: white;
			padding-left: $stateWidth;
			padding-right: $stateWidth / 3;
			overflow: hidden;
			position: relative;
		}
		.text .effective {
			position: absolute;
			width: $stateWidth * 5;
			top: 50%;
			left: 58%;
			transform: translate(-50%, -50%);
			transition: opacity 0.3s ease;
			transition-delay: 0.25s;
			opacity: 0;
			user-select: all;
		}
	}
	// clear floating afterwards
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}
{'fraction_non_alphanumeric': 0.14827086353282254, 'fraction_numerical': 0.026506523089666598, 'mean_word_length': 2.659090909090909, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6867596', 'n_tokens_mistral': 2264, 'n_tokens_neox': 1786, 'n_words': 421}