/**
 * Colors
 * ------------------------------------
 */

@recognizerBlue: rgb(50,205,220);
@recognizerRed: rgb(249,29,43);
@recognizerYellow: rgb(254,199,0);

@varObject: #44BD87;
@varFunction: #8757AD;
@varNumber: #446FBD;
@varString: #57C0D8;
@varBoolean: #DDCF56;
@varUndefined: #EA1717;
@varNan: #EA1784;
@varNull: #FB9E0F;
@varUnevaluatedKeyword: #7EAD25;
@varProperty: #535353;



/**
 * Status indicator in the bottom panel
 * ------------------------------------
 */

#status-indicator-recognizer {
	&:before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-right: 7px;
		border-radius: 50%;
	}
	&.is-error:before {
		background: @recognizerRed;
		box-shadow: 0 0 4px @recognizerRed;
	}
	&.is-inactive:before {
		border: 1px solid rgba(0,0,0,0.2);
	}
	&.is-active:before {
		background: @recognizerBlue;
		box-shadow: 0 0 4px @recognizerBlue;
	}
	&.is-connecting:before,
	&.is-out-of-sync:before,
	&.is-loading-agents:before {
		background: @recognizerYellow;
		box-shadow: 0 0 4px @recognizerYellow;
	}
}



/**
 * Widget for showing the log of function calls
 * --------------------------------------------
 */

.recognizer-widget {
	font-family: "Source Sans Pro";
	margin: 10px;
	background: #f8f8f8;
}
.rw_scroll-container {
	position: absolute;
	height: 100%;
	width: calc(100% - 20px);
	border-radius: 2px;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1), inset -1px -1px 0 rgba(0,0,0,0.1);

	&.has-scroll-up:before {
		content: "";
		display: block;
		position: absolute;
		top: -5px;
		left: 0;
		width: 100%;
		height: 5px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	}
	&.has-scroll-down:after {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 5px;
		box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
	}
}
.rw_scroll-content {
	width: 100%;
	height: 100%;
	overflow: scroll;
	overflow: hidden;
}
.rw_table {
	position: relative;

	td {
		font-size: 12px;
		padding: 3px 15px;
		color: #111;
		border: none;
	}
	tr:first-child {
		td, th {
			padding-top: 8px;
		}
	}
	tr:last-child {
		td, th {
			padding-bottom: 8px;
		}
	}
	th {
		background: rgba(0,0,0,0.02);
		padding: 3px 0;
	}
}
.rw_group {
	border-bottom: 1px solid rgba(0,0,0,0.04);
}
th.rw_time-base {
	// font-size: 0 !important;
	font-size: 12px !important;
	font-weight: 600;
	text-align: left;
	padding-left: 12px;
	padding-right: 7px;

	.rw_table tr:first-child & {
		font-size: 12px !important;
	}
}
th.rw_time-mili {
	font-size: 12px !important;
	font-weight: 600;
	color: #999;
	text-align: left;
}
th.rw_warnings {
	border-right: 1px solid rgba(0,0,0,0.06);
	padding: 3px 10px;

	.fa-exclamation-triangle {
		font-size: 10px;
		color: @recognizerYellow;
	}
}
.rw_no-arguments {
	font-style: italic;
	color: #666;
}



/**
 * A counter displayed next to the function declaration
 * ----------------------------------------------------
 */

.recognizer-counter {
	background: @recognizerBlue;
	color: #fff;
	font-weight: bold;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 3px rgba(50,205,220,0.3);
	border-radius: 10px;
	display: inline-block;
	margin: 0 4px;
	padding: 0 5px;
	line-height: 16px;
	pointer-events: all;
	transition: background 0.2s;

	&:hover,
	&:focus {
		background: darken(@recognizerBlue, 8%);
		text-decoration: none;
		color: #fff;
		// box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 3px rgba(50,205,220,1);
	}
	&.is-active {
		color: @recognizerBlue;
		background: #fff;
		box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 0 2px rgba(0,0,0,0.4);
	}
}



/**
 * Semantic highlighting of keywords in text
 * -----------------------------------------
 */

.recognizer-probe {
	// background: #55ee22;
	border: 1px dashed transparent;
	border-bottom: 1px dashed rgba(0,0,0,0.2);
	pointer-events: all;
	color: #9B9B9B !important;
	transition: border 0.3s;

	&:hover {
		border: 1px dashed rgba(0,0,0,0.3);
	}
    &.is-number {
        color: @varNumber !important;
    }
	&.is-object {
		color: @varObject !important;
	}
	&.is-function {
		color: @varFunction !important;
	}
	&.is-string {
		color: @varString !important;
	}
	&.is-boolean {
		color: @varBoolean !important;
	}
	&.is-undefined {
		color: @varUndefined !important;
	}
	&.is-nan {
		color: @varNan !important;
	}
	&.is-null {
		color: @varNull !important;
	}
}

.cm-s-recognizer {
	span.cm-keyword {
		color: @varUnevaluatedKeyword;
	}
 	span.cm-property {
		color: @varProperty;
	}
	span.cm-number {
		color: @varNumber;
	}
	span.cm-atom {
		color: @varProperty;
	}
	span.cm-string {
		color: @varString;
	}
}



/**
 * Probe tooltip
 * -------------
 */

.recognizer-probe-tooltip {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	margin-top: 5px;
	background: #fff;
	box-shadow: 1px 1px 0 rgba(0,0,0,0.05), -1px -1px 0 rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.3);
	border-radius: 2px;
	text-align: center;
	display: none;

	&::before {
		content: '';
		display: block;
		position: absolute;
		background: #fff;
		top: -3px;
		left: 50%;
		margin-left: -3px;
		width: 6px;
		height: 6px;
		box-shadow: -1px -1px 0 rgba(0,0,0,0.2);
		-webkit-transform: rotate(45deg);
	}
	&.is-active {
		display: block;
	}
	&.is-object, &.is-function {
		text-align: left;

		.console-message {
			padding: 7px 10px;
		}
	}
	&.is-below {
		margin-top: 7px;
	}
	&.is-above {
		margin-top: -7px;

		&::before {
			top: auto;
			bottom: -3px;
			box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
		}
	}
	.console-message {
		padding: 5px 8px;
		box-sizing: border-box;
		height: 100%;
		overflow: scroll;
	}
	.source-code {
		white-space: pre;
	}
}

.console-message .section > .header {
	min-height: 15px;
	height: 15px;
}



/**
 * Inline widget displaying value of a probe
 * -----------------------------------------
 */

.recognizer-probe-widget {
	display: inline-block;
	border: 1px solid rgba(0,0,0,0.15);
	height: 15px;
	border-radius: 2px;
	margin: 0 4px;
	padding: 0 5px;
	pointer-events: all;
	-webkit-transform: translateY(1px);
	// max-width: 100px;
	overflow: hidden;

	// &:hover {
	// 	max-width: 9999px;
	// }
	.console-user-command-result {
		display: inline-block;
	}
	.console-user-command-result .source-code {
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
}



/**
 * A separate panel for showing log of function calls, not used at the moment
 * --------------------------------------------------------------------------
 */

#recognizer-panel {
	position: absolute;
	top: 0;
	right: 30px;
	width: 100px;
	height: 100%;
	box-shadow: -2px 0 5px rgba(0,0,0,0.1), -1px 0 0 rgba(0,0,0,0.06);
	border-right: 1px solid rgba(0,0,0,0.8);
	background: #fff;
	z-index: 20;
}

.rp_header {
	background: linear-gradient(to bottom, darken(@recognizerBlue, 5%), darken(@recognizerBlue, 15%));
	line-height: 15px;
	padding: 7px 10px;
	color: #fff;
	box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
}
.rp_function {
	font-size: 13px;
	font-weight: 500;
	margin-right: 5px;
}
.rp_file {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255,255,255,0.9);
}

.rp_section {
	position: relative;
}
.rp_section_header {
	display: block;
	background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.05));
	box-shadow: inset 0 1px rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.04);
	padding: 5px 10px;
	color: inherit;

	.rp_section_title {
		font-size: 12px;
		font-weight: 500;
	}
	.rp_section_showhide {
		position: absolute;
		right: 7px;
		margin-top: 2px;
		display: inline-block;
		padding: 0 5px;
		color: #999;
	}
	&.is-active .rp_section_showhide {
		color: @recognizerBlue;
	}
	&:hover {
		background: linear-gradient(to bottom, rgba(0,0,0,0.04), rgba(0,0,0,0.07));
		text-decoration: none;

		.rp_section_showhide {
			color: #666;
		}
	}
}

.rp_log {
	width: 100%;
	font-size: 12px;
	position: relative;

	td {
		padding: 3px;

		&:first-child {
			padding-left: 10px;
		}
		&:last-child {
			padding-right: 10px;
			text-align: right;
		}
	}
}
.rp_log_head {
	height: 22px;

	td {
		color: #999;
		border-bottom: 1px solid rgba(0,0,0,0.04);
	}
}
.rp_log_time {
	td:first-child {
		font-size: 12px;
		font-weight: 500;
		text-align: left;
		padding-top: 7px;
		position: relative;

		&:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 4px;
			height: 1px;
			border-bottom: 1px solid rgba(0,0,0,0.2);
		}
	}
}
.rp_log_calls {
	td:first-child {
		color: #999;
	}
}