<commit_before>$timeline-item-icon-size: 34px;
$timeline-item-left-margin: var(--margin-xl);
$timeline-item-bottom-margin: var(--margin-md);
$threshold: 40;

@mixin timeline-indicator($indicator-size) {
	width: $indicator-size;
	height: $indicator-size;
	border-radius: 50%;
	font-size: var(--text-xs);
	position: absolute;
	// please do not touch this sacred code
	top: unquote("clamp(0px, 50% - #{$indicator-size}/2, max(0px, (#{$threshold}px - (50% - #{$indicator-size}/2)) * #{$threshold}))");
	left: calc(-1 * (#{$indicator-size}/2));
	background-color: var(--bg-color);
	border: 1px solid var(--dark-border-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--icon-stroke: var(--gray-600);
}

.new-timeline {
	position: relative;
	padding-left: calc(var(--padding-xl) + #{$timeline-item-icon-size}/2);
	padding-top: var(--padding-xl);
	&:before {
		content: ' ';
		top: 0;
		position: absolute;
		border-left: 1px solid var(--dark-border-color);
		bottom: calc(-1 * (#{$page-bottom-margin} + #{$timeline-item-bottom-margin}));
	}
	.timeline-dot {
		@include timeline-indicator(16px);
		&:before {
			content: ' ';
			background: var(--gray-600);
			border-radius: 50%;
			height: 4px;
			width: 4px;
		}
	}
	.timeline-actions {
		display: inline-flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: $timeline-item-bottom-margin;
		padding: var(--padding-sm);
		position: relative;
		.action-btn {
			margin-left: var(--margin-md)
		}
		.action-btn:first-of-type {
			margin-left: $timeline-item-left-margin;
		}
		.communication-switch {
			display: flex;
			font-size: var(--text-sm);
			align-items: center;
			label {
				cursor: pointer;
			}
		}
	}
	.timeline-items .timeline-item {
		font-size: var(--text-md);
		position: relative;
		margin-bottom: $timeline-item-bottom-margin;
		b {
			color: var(--text-color);
			font-weight: var(--text-bold);
		}
		.timeline-content {
			max-width: 700px;
			padding: var(--padding-sm);
			margin-left: $timeline-item-left-margin;
			&.frappe-card {
				@include card($padding: var(--padding-md));
				margin-left: calc(#{$timeline-item-left-margin} + var(--padding-sm));
			}
		}
		.timeline-indicator {
			@include timeline-indicator($timeline-item-icon-size)
		}

		.timeline-message-box {
			.content {
				margin-top: var(--margin-md);
				overflow: scroll;
				max-height: 500px;
			}
			.action-btn {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
		.comment-edit-box {
			border: 1px solid var(--border-color);
			border-radius: var(--border-radius-sm);
			margin-top: var(--margin-sm);
			--icon-stroke: var(--text-color);
		}
	}
}<commit_msg>fix: Comment box bg color<commit_after>$timeline-item-icon-size: 34px;
$timeline-item-left-margin: var(--margin-xl);
$timeline-item-bottom-margin: var(--margin-md);
$threshold: 40;

@mixin timeline-indicator($indicator-size) {
	width: $indicator-size;
	height: $indicator-size;
	border-radius: 50%;
	font-size: var(--text-xs);
	position: absolute;
	// please do not touch this sacred code
	top: unquote("clamp(0px, 50% - #{$indicator-size}/2, max(0px, (#{$threshold}px - (50% - #{$indicator-size}/2)) * #{$threshold}))");
	left: calc(-1 * (#{$indicator-size}/2));
	background-color: var(--bg-color);
	border: 1px solid var(--dark-border-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--icon-stroke: var(--gray-600);
}

.new-timeline {
	position: relative;
	padding-left: calc(var(--padding-xl) + #{$timeline-item-icon-size}/2);
	padding-top: var(--padding-xl);
	&:before {
		content: ' ';
		top: 0;
		position: absolute;
		border-left: 1px solid var(--dark-border-color);
		bottom: calc(-1 * (#{$page-bottom-margin} + #{$timeline-item-bottom-margin}));
	}
	.timeline-dot {
		@include timeline-indicator(16px);
		&:before {
			content: ' ';
			background: var(--gray-600);
			border-radius: 50%;
			height: 4px;
			width: 4px;
		}
	}
	.timeline-actions {
		display: inline-flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: $timeline-item-bottom-margin;
		padding: var(--padding-sm);
		position: relative;
		.action-btn {
			margin-left: var(--margin-md)
		}
		.action-btn:first-of-type {
			margin-left: $timeline-item-left-margin;
		}
		.communication-switch {
			display: flex;
			font-size: var(--text-sm);
			align-items: center;
			label {
				cursor: pointer;
			}
		}
	}
	.timeline-items .timeline-item {
		font-size: var(--text-md);
		position: relative;
		margin-bottom: $timeline-item-bottom-margin;
		b {
			color: var(--text-color);
			font-weight: var(--text-bold);
		}
		.timeline-content {
			max-width: 700px;
			padding: var(--padding-sm);
			margin-left: $timeline-item-left-margin;
			&.frappe-card {
				@include card($padding: var(--padding-md));
				margin-left: calc(#{$timeline-item-left-margin} + var(--padding-sm));
			}
		}
		.timeline-indicator {
			@include timeline-indicator($timeline-item-icon-size)
		}

		.timeline-message-box {
			.content {
				margin-top: var(--margin-md);
				overflow: scroll;
				max-height: 500px;
			}
			.action-btn {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
		.comment-edit-box {
			background-color: var(--control-bg);
			border: 1px solid var(--border-color);
			border-radius: var(--border-radius-sm);
			margin-top: var(--margin-sm);
			--icon-stroke: var(--text-color);
		}
	}
}
{'fraction_non_alphanumeric': 0.1951174058889303, 'fraction_numerical': 0.016772269847185987, 'mean_word_length': 3.206112852664577, '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': '6119093', 'n_tokens_mistral': 2355, 'n_tokens_neox': 2041, 'n_words': 348}