.cerb-code-editor-toolbar {
	background: var(--cerb-color-background-contrast-240);
	border-bottom:1px solid var(--cerb-color-background-contrast-220);
	border-top:1px solid var(--cerb-color-background-contrast-220);

	button {
		background: var(--cerb-color-background-contrast-240);
		border:0;

		img {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);

			&:hover {
				filter: grayscale(0%);
				-webkit-filter: grayscale(0%);
			}
		}
		
		&.split-left {
			padding-right: 0;
		}
		
		&.split-right {
			.glyphicons-chevron-down {
				font-size:10px;
				padding-left: 0;
				color: var(--cerb-color-button-icon);
				
				&:hover {
					color: var(--cerb-color-button-icon--hover);
				}
			}

			&:hover {
				background-color: transparent;
			}
		}

		&.cerb-code-editor-toolbar-button--enabled {
			background-color: var(--cerb-color-button-icon-enabled-background);
			color: var(--cerb-color-button-icon-enabled);

			span.glyphicons {
				color: var(--cerb-color-button-icon-enabled);
			}
		}

		&.cerb-code-editor-toolbar-button--disabled {
		}
	}
	
	.cerb-code-editor-toolbar-divider {
		border-left: 1px solid var(--cerb-color-background-contrast-220);
		display: inline-block;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		height: 16px;
		width: 2px;
	}
}

.ace_editor.ace_autocomplete {
	background: var(--cerb-color-background);
	color: var(--cerb-color-text);
	margin-top: 0.5em;
	box-shadow: 0 0 5px 3px var(--cerb-color-shadow-menu);
	border: 0;

	.ace_marker-layer {
		.ace_active-line {
			background-color: var(--cerb-editor-line-active);
		}
	}
	
	.ace_active-line {
		background-color: var(--cerb-editor-line-active);
	}
	
	.ace_selected {
		background-color: var(--cerb-editor-selection);
	}
	
	.ace_completion-highlight {
		color: var(--cerb-editor-completion-highlight);
		font-weight: bold;
	}
	
	.ace_completion-message {
		color: var(--cerb-color-text);
		font-weight: bold;
	}

	.ace_line-hover {
		border: 0;
		background-color: var(--cerb-editor-line-hover);
	}
}

.acediff__wrap {
	display: flex;
	flex-direction: row;
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: auto
}

.acediff__gutter {
	flex: 0 0 60px;
	border-left: 1px solid var(--cerb-editor-gutter-border);
	border-right: 1px solid var(--cerb-editor-gutter-border);
	overflow: hidden;

	.acediff__gutter svg {
		background-color: var(--cerb-color-background-contrast-240);
	}
}

.acediff__left, .acediff__right {
	height: 100%;
	flex: 1
}

.acediff__diffLine {
	background-color: var(--cerb-editor-diff-line);
	border-top: 1px solid var(--cerb-editor-diff-border);
	border-bottom: 1px solid var(--cerb-editor-diff-border);
	position: absolute;
	z-index: 4;

	&.targetOnly {
		height: 0 !important;
		border-top: 1px solid var(--cerb-editor-diff-border);
		border-bottom: 0;
		position: absolute
	}
}

.acediff__connector {
	fill: var(--cerb-editor-diff-line);
	stroke: var(--cerb-editor-diff-border);
}

.acediff__copy--left, .acediff__copy--right {
	position: relative
}

.acediff__copy--left div, .acediff__copy--right div {
	color: var(--cerb-color-text);
	text-shadow: 1px 1px var(--cerb-color-background-contrast-200);
	position: absolute;
	margin: 2px 3px;
	cursor: pointer
}

.acediff__copy--right div:hover {
	color: var(--cerb-color-background-contrast-50);
}

.acediff__copy--left {
	float: right
}

.acediff__copy--left div {
	right: 0
}

.acediff__copy--left div:hover {
	color: var(--cerb-color-background-contrast-100);
}