<commit_before>// MENU - start

.kalei-menu {
	background-color: #f4f4f4;
	height: 100%;
	position: fixed;
}

.menu-items {
	background-color: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: $boxShadow;
	@include prem(bottom, 0);
	@include prem(left, 0);
	@include prem(margin-bottom, 20);
	@include prem(margin-left, 20);
	@include prem(margin-right, 20);
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	@include prem(right, 0);
	@include prem(top, 73);
}

.kalei-styleguide-menu-heading > h1,
.kalei-styleguide-menu > li > h3,
.kalei-styleguide-menu-stylesheets {
	@include prem(margin, 0);
	@include prem(padding, 10);
}

.kalei-styleguide-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	> li {
		> h3 {
			background-color: #3a3a3a;
			color: #fff;
			font-weight: bold;
			@include font-size(20);
			@include prem(padding, 10 20);
		}
	}
}

.kalei-styleguide-menu-heading {
	border: 1px solid #3a3a3a;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	@include prem(bottom, 0);
	box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.33);
	@include prem(height, 53);
	@include prem(left, 0);
	@include prem(margin-left, 20);
	@include prem(margin-right, 20);
	overflow: hidden;
	position: absolute;
	@include prem(right, 0);
	text-decoration: none;
	@include prem(top, 20);
	h1 {
		background-color: $menuColorActive;
		color: #fff;
		@include font-size(22);
		@include prem(margin, 0);
		@include max-ellipsis(100%);
		@include prem(padding-left, 20);
	}
}

// Don't know what that is
.kalei-styleguide-menu-stylesheets {
	background: #75eb33;
	color: #fff;
	font-weight: bold;
	@include font-size(16);
	@include prem(margin-top, 20);
	@include prem(padding, 10 20);
	text-shadow: 0 0 1px #777;
}

.kalei-styleguide-menu-link {
	color: $menuColor;
	display: block;
	font-weight: bold;
	@include prem(padding, 10 10 10 20);
	position: relative;
	text-decoration: none;
	@include max-ellipsis(100%);
	&:hover {
		text-decoration: underline;
	}
	&:after { // Triangle
		@include triangle(right, $menuColor, 6);
		@include prem(margin-left, 9);
		@include prem(margin-top, -6);
		top: 50%;
	}
	&.active {
		background: $menuColor;
		color: #fff;
		text-decoration: none;
		&:hover {
			cursor: pointer;
		}
		&:after { // Triangle when .active
			@include triangle(down, #fff, 6);
			@include prem(margin-left, 6);
			@include prem(margin-top, -3);
			top: 50%;
		}
		&:active {
			&:after { // Triangle when .active:active
				@include triangle(down, #fff, 6);
				@include prem(margin-left, 6);
				@include prem(margin-top, -3);
				top: 50%;
			}
		}
	}
	&:active {
		cursor: default;
		&:after { // Triangle when :active
			@include triangle(down, $menuColor, 6);
			@include prem(margin-left, 6);
			@include prem(margin-top, -3);
			top: 50%;
		}
	}
}

.kalei-sheet-submenu {
	ul {
		list-style-type: disc;
		@include prem(padding-top, 10);
		@include prem(padding-bottom, 10);
	}
	li {
		color: $menuColor;
		cursor: pointer;
		@include prem(padding-right, 20);
		span {
			@include inline-block;
			@include font-size(14);
			@include max-ellipsis(100%);
			vertical-align: middle;
		}
		&:hover{
			span {
				text-decoration: underline;
			}
		}
		&.active {
			cursor: default;
			span {
				background: $menuColor;
				border-radius: 4px;
				color: #fff;
				@include prem(padding, 0 4);
			}
			&:hover{
				span {
					text-decoration: none;
				}
			}
		}
	}
}

// MENU - end

// KALEI PAGE - start

.kalei-page {
	background-color: #f4f4f4;
	@include prem(padding, 20);
	p,
	ol,
	ul { // So it doesn't mess with PrismJs styles on <pre> and <code> blocks
		a {
			color: $linkColor;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		code { // Inline <code> blocks
			background: $fontColor;
			border-radius: 4px;
			color: #fff;
			display: inline-block;
			@include prem(margin-left, 2);
			@include prem(margin-right, 2);
			@include prem(padding-left, 4);
			@include prem(padding-right, 4);<commit_msg>Fixed inline <code> word breaking<commit_after>// MENU - start

.kalei-menu {
	background-color: #f4f4f4;
	height: 100%;
	position: fixed;
}

.menu-items {
	background-color: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: $boxShadow;
	@include prem(bottom, 0);
	@include prem(left, 0);
	@include prem(margin-bottom, 20);
	@include prem(margin-left, 20);
	@include prem(margin-right, 20);
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	@include prem(right, 0);
	@include prem(top, 73);
}

.kalei-styleguide-menu-heading > h1,
.kalei-styleguide-menu > li > h3,
.kalei-styleguide-menu-stylesheets {
	@include prem(margin, 0);
	@include prem(padding, 10);
}

.kalei-styleguide-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	> li {
		> h3 {
			background-color: #3a3a3a;
			color: #fff;
			font-weight: bold;
			@include font-size(20);
			@include prem(padding, 10 20);
		}
	}
}

.kalei-styleguide-menu-heading {
	border: 1px solid #3a3a3a;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	@include prem(bottom, 0);
	box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.33);
	@include prem(height, 53);
	@include prem(left, 0);
	@include prem(margin-left, 20);
	@include prem(margin-right, 20);
	overflow: hidden;
	position: absolute;
	@include prem(right, 0);
	text-decoration: none;
	@include prem(top, 20);
	h1 {
		background-color: $menuColorActive;
		color: #fff;
		@include font-size(22);
		@include prem(margin, 0);
		@include max-ellipsis(100%);
		@include prem(padding-left, 20);
	}
}

// Don't know what that is
.kalei-styleguide-menu-stylesheets {
	background: #75eb33;
	color: #fff;
	font-weight: bold;
	@include font-size(16);
	@include prem(margin-top, 20);
	@include prem(padding, 10 20);
	text-shadow: 0 0 1px #777;
}

.kalei-styleguide-menu-link {
	color: $menuColor;
	display: block;
	font-weight: bold;
	@include prem(padding, 10 10 10 20);
	position: relative;
	text-decoration: none;
	@include max-ellipsis(100%);
	&:hover {
		text-decoration: underline;
	}
	&:after { // Triangle
		@include triangle(right, $menuColor, 6);
		@include prem(margin-left, 9);
		@include prem(margin-top, -6);
		top: 50%;
	}
	&.active {
		background: $menuColor;
		color: #fff;
		text-decoration: none;
		&:hover {
			cursor: pointer;
		}
		&:after { // Triangle when .active
			@include triangle(down, #fff, 6);
			@include prem(margin-left, 6);
			@include prem(margin-top, -3);
			top: 50%;
		}
		&:active {
			&:after { // Triangle when .active:active
				@include triangle(down, #fff, 6);
				@include prem(margin-left, 6);
				@include prem(margin-top, -3);
				top: 50%;
			}
		}
	}
	&:active {
		cursor: default;
		&:after { // Triangle when :active
			@include triangle(down, $menuColor, 6);
			@include prem(margin-left, 6);
			@include prem(margin-top, -3);
			top: 50%;
		}
	}
}

.kalei-sheet-submenu {
	ul {
		list-style-type: disc;
		@include prem(padding-top, 10);
		@include prem(padding-bottom, 10);
	}
	li {
		color: $menuColor;
		cursor: pointer;
		@include prem(padding-right, 20);
		span {
			@include inline-block;
			@include font-size(14);
			@include max-ellipsis(100%);
			vertical-align: middle;
		}
		&:hover{
			span {
				text-decoration: underline;
			}
		}
		&.active {
			cursor: default;
			span {
				background: $menuColor;
				border-radius: 4px;
				color: #fff;
				@include prem(padding, 0 4);
			}
			&:hover{
				span {
					text-decoration: none;
				}
			}
		}
	}
}

// MENU - end

// KALEI PAGE - start

.kalei-page {
	background-color: #f4f4f4;
	@include prem(padding, 20);
	p,
	ol,
	ul { // So it doesn't mess with PrismJs styles on <pre> and <code> blocks
		a {
			color: $linkColor;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		code { // Inline <code> blocks
			background: $fontColor;
			border-radius: 4px;
			color: #fff;
			display: inline-block;
			@include prem(margin-left, 2);
			@include prem(margin-right, 2);
			@include prem(padding-left, 4);
			@include prem(padding-right, 4);
			white-space: normal;
			word-break: break-all;
{'fraction_non_alphanumeric': 0.16312144447192678, 'fraction_numerical': 0.037595844669799657, 'mean_word_length': 3.3431793770139633, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 20, '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': '6504105', 'n_tokens_mistral': 3779, 'n_tokens_neox': 3194, 'n_words': 767}