<commit_before>.skill-wrapper {
	margin: 3px auto;
	position: relative;
}

.skill-wrapper > div, .skill > div {
	display: inline-block;
	vertical-align: top;
}

.skill {
	display: inline-block;
	text-align: left;
	border-radius: 50px 0px 0px 50px;
	padding: 5px 8px 5px 5px;
	background-color: hsla(197, 70%, 50%, 0.8);
	position: relative;
	max-height: $skill-height;
	overflow: hidden;
	&, & * {
		@include user-select(none);
	}
}

.skill-upgrades {
	overflow: hidden;
}

.skill-effects {
	@extend %box;
	padding-top: 7px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: left;
	border-radius: 0;
	//background: rgba(#226E8F, .5);
	font-size: 13px;
	line-height: 1.25em;
	width: $build-width - $skill-width - 4px; //4px is margin between skill and effects
	max-height: $skill-height;
	min-height: $skill-height;
	overflow: hidden;
	@include transition-property(max-height, background, line-height);
	@include transition-duration($compact-transition-time);
	@include transition-timing-function(easeout);
	z-index: 40;
	dl { margin: 0; display: inline-block; width: 184px; vertical-align: top; }
	//http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/
	dt, dd {
		display: inline; margin: 0;
	}
	dd {
		@extend %info;
	}
	dt.total_cost span {
		@extend %cost;
		display: inline-block;
		line-height: 21px;
	}
	dd:after {
		content: '\A';
		white-space: pre;
	}
}

.skill-wrapper:hover > .skill-effects, .skill-effects:hover {
	background-color: #1E8FBC;
	max-height: 600px;<commit_msg>small skill effects css changes (bg color/margin)<commit_after>.skill-wrapper {
	margin: 3px auto;
	position: relative;
}

.skill-wrapper > div, .skill > div {
	display: inline-block;
	vertical-align: top;
}

.skill {
	display: inline-block;
	text-align: left;
	border-radius: 50px 0px 0px 50px;
	padding: 5px 8px 5px 5px;
	// background-color: hsla(197, 70%, 50%, 0.8);
	background-color: #1E8FBC;
	position: relative;
	max-height: $skill-height;
	overflow: hidden;
	&, & * {
		@include user-select(none);
	}
}

.skill-upgrades {
	overflow: hidden;
}

.skill-effects {
	@extend %box;
	padding-top: 7px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: left;
	border-radius: 0;
	//background: rgba(#226E8F, .5);
	font-size: 13px;
	line-height: 1.25em;
	width: $build-width - $skill-width; //4px is margin between skill and effects
	max-height: $skill-height;
	min-height: $skill-height;
	overflow: hidden;
	@include transition-property(max-height, background, line-height);
	@include transition-duration($compact-transition-time);
	@include transition-timing-function(easeout);
	z-index: 40;
	dl { margin: 0; display: inline-block; width: 184px; vertical-align: top; }
	//http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/
	dt, dd {
		display: inline; margin: 0;
	}
	dd {
		@extend %info;
	}
	dt.total_cost span {
		@extend %cost;
		display: inline-block;
		line-height: 21px;
	}
	dd:after {
		content: '\A';
		white-space: pre;
	}
}

.skill-wrapper:hover > .skill-effects, .skill-effects:hover {
	background-color: #1E8FBC;
	// background-color: hsla(197, 70%, 50%, 0.8);
	max-height: 600px;
{'fraction_non_alphanumeric': 0.16270218839200762, 'fraction_numerical': 0.039327624484617824, 'mean_word_length': 3.9051321928460343, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '719696', 'n_tokens_mistral': 1357, 'n_tokens_neox': 1250, 'n_words': 277}