<commit_before>.dropdown-notifications .header {
	margin: 7px 15px 10px 15px;
	cursor: pointer;
}

.mark-all-read {
	margin-top: 2px;
	margin-right: 15px;
}

.notification-settings {
	margin-top: 2px;
}

.collapse-indicator {
	padding: 0px 5px;
    color: #d1d8dd;
}

.category-list[data-category="Open Documents"] li a {
	text-decoration: none;
	display: block;
    padding: 14px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: normal;
}

.category-list[data-category="Open Documents"] li a:hover {
	background-color: #f0f4f7;
}

.open-doc-count {
	margin-left: 150px;
}

.notifications-indicator {
	font-size: 7px;
	position: absolute;
	top: 4px;
	right: 8px;
	// color: @indicator-orange;
	display: none;
}

.mark-read {
	display: none;
	margin-left: 10px;
	font-size: 11px;
}

.mark-read:hover {
	text-decoration: underline;
}

.notifications-list {
	min-width: 480px;
	padding: 0px 10px;
	min-height: 560px;
	border: none;
	position: absolute;
	box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);

	.notification-list-header {
		margin: 0px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid $border-color;
	}

	.notification-list-body {
		// margin: 10px 0px;
		max-height: 500px;
    	overflow-y: auto;
	}

	.notification-item-tabs {
		border: none;

		.notifications-category {
			padding: 15px 0px;
			margin-bottom: -1px;
			margin-right: 20px;
			color: $text-muted;
			font-weight: 500;
			cursor: pointer;

			&.active {
				color: var(--grey-800);
				border-bottom: 2px solid $primary;
			}
		}
	}
}

.date-range {
	padding: 10px 0 2px 10px;
	font-weight: 500;
}

.recent-item {
	padding: 10px;
	margin: 4px 0px;
	border-radius: var(--border-radius-md, 8px);
	white-space: normal;
	font-weight: normal;
	display: flex;
	font-size: var(--text-md);
	line-height: 20px;
	color: $text-muted;

	&:first-child {
		margin-top: 10px;
	}

	&:hover {
		color: $text-muted;
		text-decoration: none;
		background-color: var(--grey-100);
	}
}

.recent-item.notification-item {
	padding: 10px 10px 10px 4px;

	&::before {
		content: '';
		display:inline-block;
		height: 4px;
		width: 4px;
		margin-top: 14px;
		border-radius: 10px;
		margin-right: 5px;
	}

	&.unread::before {
		background: var(--blue-500);
	}

	b {
		font-weight: 500;
		color: var(--grey-800)
	}

	.notification-timestamp {
		font-size: var(--text-xs);
	}

	.user-avatar {
		margin-right: 10px;

		.avatar-frame {
			height: 36px;
			width: 36px;
		}
	}
}

.recent-item.event {
	.event-border {
		width: 1px;
		border: 1px solid $primary;
		border-radius: 4px;
	}

	.event-item {
		padding-left: 10px;
		.event-subject {
			color: var(--grey-800);
			font-weight: 500;
		}

		.event-time {
			margin-right: 10px;
		}
	}
}

.list-footer {
	display: block;
	text-align: center;
	padding: 10px;
	color: $text-muted;

	&:hover {
		text-decoration: none;
		color: var(--text-grey-900)
	}
}

.notifications-loading {
	margin-bottom: 15px;
}

@media (max-width: 767px) {

	.dropdown-notifications {
		.notifications-list {
			max-height: 100vh;
			min-width: 100vw;
		}

		.category-list[data-category="Open Documents"] li a {
			margin: 0 15px;
		}

		.recent-item .user-avatar {
			margin-right: 10px;
			margin-left: 5px;
		}
	}
}<commit_msg>feat: better styles for notifications<commit_after>.dropdown-notifications .header {
	margin: 7px 15px 10px 15px;
	cursor: pointer;
}

.mark-all-read {
	margin-top: 2px;
	margin-right: 15px;
}

.notification-settings {
	margin-top: 2px;
}

.collapse-indicator {
	padding: 0px 5px;
    color: #d1d8dd;
}

.open-doc-count {
	margin-left: 150px;
}

.notifications-indicator {
	font-size: 7px;
	position: absolute;
	top: 4px;
	right: 8px;
	// color: @indicator-orange;
	display: none;
}

.mark-read {
	display: none;
	margin-left: 10px;
	font-size: 11px;
}

.mark-read:hover {
	text-decoration: underline;
}

.notifications-list {
	min-width: 480px;
	padding: 0px 10px;
	min-height: 560px;
	border: none;
	position: absolute;
	box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);

	.notification-list-header {
		margin: 0px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid $border-color;
	}

	.notification-list-body {
		// margin: 10px 0px;
		max-height: 500px;
    	overflow-y: auto;
	}

	.notification-item-tabs {
		border: none;

		.notifications-category {
			padding: 15px 0px;
			margin-bottom: -1px;
			margin-right: 20px;
			color: $text-muted;
			font-weight: 500;
			cursor: pointer;

			&.active {
				color: var(--grey-800);
				border-bottom: 1px solid $primary;
			}
		}
	}
}

.date-range {
	padding: 10px 0 2px 10px;
	font-weight: 500;
}

.recent-item {
	padding: 10px;
	margin: 4px 0px;
	border-radius: var(--border-radius-md, 8px);
	white-space: normal;
	font-weight: normal;
	display: flex;
	font-size: var(--text-md);
	line-height: 20px;
	color: $text-muted;

	&:first-child {
		margin-top: 10px;
	}

	&:not(.no-hover):hover {
		color: $text-muted;
		text-decoration: none;
		background-color: var(--grey-100);
	}
}

.recent-item.notification-item {
	padding: 10px 10px 10px 4px;

	&::before {
		content: '';
		display:inline-block;
		height: 4px;
		width: 4px;
		margin-top: 14px;
		border-radius: 10px;
		margin-right: 5px;
	}

	&.unread::before {
		background: var(--blue-500);
	}

	b {
		font-weight: 500;
		color: var(--grey-800)
	}

	.notification-timestamp {
		font-size: var(--text-xs);
	}

	.user-avatar {
		margin-right: 10px;

		.avatar-frame {
			height: 36px;
			width: 36px;
		}
	}
}

.recent-item.event {
	.event-border {
		width: 1px;
		border: 1px solid $primary;
		border-radius: 4px;
	}

	.event-item {
		padding-left: 10px;

		.event-subject {
			font-size: var(--text-md);
			color: var(--grey-800);
			font-weight: 500;
		}

		.event-time {
			font-size: var(--text-sm);
			margin-right: 10px;
		}

		.avatar-group {
			margin-top: 10px;
		}
	}

	&:hover {
		.avatar-frame {
			border-color: var(--grey-100);
		}
	}
}

.recent-item.open-docs {
	display: flex;
	justify-content: space-between;

	.indicator-pill {
		margin: 0px;
	}
}

.targets-container {
	display: grid;
	grid-template-columns: 1fr 1fr;

	.recent-item.target-company {
		display: block;
		text-align: center;

		svg {
			max-width: 100px;
			margin: auto;
		}

		.target-title {
			margin: auto;
			font-size: var(--text-md);
			color: var(--grey-800);
		}

		.target-progress {
			max-width: 150px;
			margin: 10px auto auto auto;

			.progress,
			.progress-bar {
				height: 8px;
			}
		}

		&:first-child {
			grid-column-start: 1;
			grid-column-end: 3;

			svg {
				max-width: 200px;
				margin: auto;
			}

			.target-progress {
				max-width: 200px;
				margin: 10px auto auto auto;

				.progress,
				.progress-bar {
					height: 8px;
				}
			}
		}
	}
}

.list-footer {
	display: block;
	text-align: center;
	padding: 10px;
	color: $text-muted;

	&:hover {
		text-decoration: none;
		color: var(--text-grey-900)
	}
}

.notifications-loading {
	margin-bottom: 15px;
}

@media (max-width: 767px) {

	.dropdown-notifications {
		.notifications-list {
			max-height: 100vh;
			min-width: 100vw;
		}

		.category-list[data-category="Open Documents"] li a {
			margin: 0 15px;
		}

		.recent-item .user-avatar {
			margin-right: 10px;
			margin-left: 5px;
		}
	}
}
{'fraction_non_alphanumeric': 0.16003775111230956, 'fraction_numerical': 0.05096400161790481, 'mean_word_length': 2.8515057113187954, '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': '1195513', 'n_tokens_mistral': 3744, 'n_tokens_neox': 3047, 'n_words': 624}