.doc {
	position: relative;
	@include calc("height", "100% - #{$top-h-pad}");
	top: 0;
	float: right;
	@include calc("width", "100% - #{$lib-width}");
	background: $editor-bg;

	&:before {
		position: absolute;
		content: " ";
		width: 100%;
		height: 1.25rem;
		@include calc("top", "-1.25rem - 1px");
		@include linear-gradient(rgba($theme-color,0), rgba($theme-color,0.15));
		z-index: $z-index-bottom;
		pointer-events: none; /* TODO: this probably doesn't work in IE */
	}

	.title {
		background: $title-bg;
	}

	.editor {
		padding: $pad;
		background: $editor-bg;
		position: relative;
	}

	.editor.expr, .editor.tools.replace, .editor.tools.list {
		height: $editor-1l-height;
		padding-bottom: $editor-1l-pad-bottom;

		.CodeMirror-hscrollbar {
			@include vendor-prefix(transform, scale(1, 0.5) translate(0, -0.375rem));
			min-height: 0!important;
		}
	}
}

/*   EXPR UI test  */
.title.expr {
	background: $theme-color;
}
.editor.expr, .editor.list, .editor.replace {
	font-weight: bold;
}

.expr .results {
	@extend %user-select-none;
	position: absolute;
	right: 0;
	font-size: 0.75rem;
	font-weight: bold;
	margin: 0.125rem;
	margin-right: ($pad);
	padding: 0.5rem;
	background: $theme-color;
	border-radius: 3px;
	cursor: default;
	z-index: $z-index-middle;

	&.nomatch {
		background: $title-bg;
	}
	&.error {
		background: $error-color;
		font-weight: bold;
	}
}

/*   SOURCE UI   */
.source .measure {
	position: absolute;
	top: $pad;
	bottom: $pad;
	left: $pad;
	right: $pad;
	visibility: hidden;
}

.source .canvas {
	position: absolute;
	background: $editor-bg;
}

/*  TOOLS UI */
.title.tools {
	cursor: pointer;
	position: relative;
}

.tools .buttonbar.left {
	float: none;
	display: inline-block;
	opacity: 0.999; /* this is a hack to prevent the space between buttons from being mouse transparent */
	color: lighten($color, 25%);
	margin-left: 1em;
	
	li {
		padding: 0.2em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		margin: 0;
	}
	
	li.active {
		background: lighten($title-bg, 8%);
		color: $color;
		border-radius: 2px;
	}
}

.tools .buttonbar.right {
	display: block;
	text-align: right;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	
	padding: $pad;
	
	&:hover .expand {
		color: $hover-color;
	}
}

.tools.editor.out {
	background: $editor-toolsres-bg;
	border-top: solid $tools-border tint($title-bg, 33%);

	.CodeMirror {
		color: tint($color, 33%);
	}
}

.tools .explain {
	div {
		padding: calc(0.5em + 1px);
		margin-top: 0.75em;
		display: block;
		border: solid 1px rgba($title-bg,0.5);
		color: rgba(0,0,0,0.66);
	}
	
	.selected {
		border: solid 2px $title-bg;
		padding: 0.5em;
	}
	
	:first-child {
		margin-top: 0;
	}
	
	div.related {
		margin-top: -1px;
		background: rgba($title-bg,0.33);
	}
	
	div.error {
		background: #FCC;
		border-bottom: solid 2px red;
		padding-bottom: 0.5em;
		
		.error-title {
			font-weight: bold;
		}
	}
	
	div div {
		margin-left: 2em;
	}
	
	code {
		&.str {
			display: inline-block;
			min-width: 1.5em;
			margin-right: 0.25em;
		}
		font-weight: bold;
	}
	
	div.close {
		margin-left: 0;
		padding: 0;
		border: none;
	}
	
	/*
	Expression backgrounds need to be transparent so the selection shows through, but it looks wrong for the explain.
	*/
	.exp-group-0 { background: tint($group-color, 89%); }
	
	.exp-group-1 { background: tint($group-color, 78%); }
	
	.exp-group-2 { background: tint($group-color, 67%); }
	
	.exp-group-3 { background: tint($group-color, 56%); }
	
	.exp-group-set { background: tint($set-color, 70%); }
}


.tools-disabled {
	.title.tools > * {
		opacity: 0.6;
	}
	
	.title:hover .button.expand {
		color: $hover-color;
	}

	.tools .button:before {
		content: attr(data-alticon);
	}
}

.tools.editor, .tools.results {
	display: none;
}

:not(.tools-disabled) {
	.tool-replace .editor.replace, .tool-replace .editor.out {
		display: block;
	}
	.tool-list .editor.list, .tool-list .editor.out {
		display: block;
	}
	.tool-details .tools.results, .tool-explain .tools.results {
		display: block;
	}
}

.tools-disabled .editor.source {
	@include calc("height", "100% - #{3*$title-h-pad + 1*$editor-h-pad + 2*$pad}");
}

.editor.source, .tools.editor.out {
	@include calc("height", "100%/2 - #{3*$title-h-pad + 2*$editor-h-pad + 4*$pad}/2 - #{$tools-border}");
}

.tools.results {
	background: green;
	background: $editor-bg;
	padding: $pad;
	color: lighten($color, 30%);
	@include calc("height", "100%/2 - #{3*$title-h-pad + 2*$editor-h-pad + 4*$pad}/2 + #{$editor-1l-height+$pad}");
	
	.content {
		position: relative;
		overflow: auto;
		height: 100%;
		padding: 0.25em;
		
		.match {
			background: $theme-color;
		}
		
		.info {
			font-style: italic;
			background: $editor-toolsres-bg;
		}
	
		h1 {
			font-size: 1em;
			margin: 0;
			padding: $pad;
			padding-left: $pad;
			padding-right: $pad;
			font-weight: normal;
			background: $editor-toolsres-bg;
			color: $color;
		}

		i {
			display: block;
			padding: $pad;
			color: lighten($color, 33%);
		}

		p {
			padding: $pad;
			margin: 0;
		}
	}
}

/* Syntax highlighting */
.exp-char {
	color: black;
}

.exp-decorator {
	color: #b9babf;
	font-weight: bold;
}

.exp-related {
	border-bottom: solid 1px rgba(0, 0, 0, 0.22);
	border-top: solid 1px rgba(0, 0, 0, 0.22);
	margin-bottom: -1px;
	margin-top: -1px;
}

.exp-related-left {
	border-left: solid 1px rgba(0, 0, 0, 0.22);
	margin-left: -1px;
}

.exp-related-right {
	border-right: solid 1px rgba(0, 0, 0, 0.22);
	margin-right: -1px;
}

.exp-selected {
	border-top: solid 2px rgba(0, 0, 0, 0.33);
	border-bottom: solid 2px rgba(0, 0, 0, 0.33);
	margin-bottom: -2px;
	margin-top: -2px;
}

.exp-selected-left {
	border-left: solid 2px rgba(0, 0, 0, 0.33);
	margin-left: -2px;
}

.exp-selected-right {
	border-right: solid 2px rgba(0, 0, 0, 0.33);
	margin-right: -2px;
}

.exp-error {
	border-bottom: solid 2px $error-color;
}

.exp-esc {
	color: #C0C;
}

.exp-quant, .exp-lazy, .exp-alt {
	color: #35F;
}

.exp-anchor {
	color: #930;
}

.exp-group, .exp-backref, .exp-lookaround {
	color: #090;
}

.exp-charclass, .exp-set, .exp-subst {
	color: #D70;
}

.exp-group-0 { background: rgba($group-color, 0.11); }

.exp-group-1 { background: rgba($group-color, 0.22); }

.exp-group-2 { background: rgba($group-color, 0.33); }

.exp-group-3 { background: rgba($group-color, 0.44); }

.exp-group-set { background: rgba($set-color, 0.3); }