@color_borg: #2D8F34;
@color_debug: #8F2D87;
@color_man: #424775;
@color_man_bg: #EDF3FF;
@color_header_bg: #eeeeee;
@color_header_fg: #005FFF;
@color_tab_bg: #AFFFFF;
@color_tab_selected: #ffffff;
@color_tab_focus: #DC00B8;

@line_height: 1.3rem;
@header_height: @line_height;

#no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

body {
	color: #000000;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: @line_height;
	font-family:
		"Go Mono",
		"DejaVu Sans Mono",
		"Lucida Console",
		monospace
	;
}

.bsod {
	background: @color_borg;
	color: #ffffff;
	white-space: pre;
}

.loading {
	strong {
		display: block;
	}
	em {
		color: #666;
	}
}

.app {
	margin: 0;
}

.app > header {
	background: @color_header_bg;
	color: @color_header_fg;
	height: @header_height;
	z-index: 10;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;

	// Temp fix for overflowing tabs.
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: nowrap;

	ul {
		// The JS app will need to add appropriate text-indent when showing a tab.
		//text-indent: -100px;
		// Text-indent shouldn't then apply to the included elements.
		& > * {
			text-indent: initial;
		}
	}

	// .__active is handled by the JS app.
	// This unwraps the tabs bar.
	// The JS app will need to text-indent appropriately to make the tab shown when !&.__active
	&:hover, &.__active {
		height: auto;
		white-space: normal;
		ul {
			text-indent: 0;
		}
	}

	ul, ul > li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	ul > li {
		display: inline-block;
		background-color: @color_tab_bg;
		margin-right: 1em;
	}
	li > * {
		position: relative;
		#no-select();
		cursor: pointer;

		// Input is hidden, but through opacity and position.
		// Otherwise, it won't be keyboard-interactable.
		input {
			opacity: 0;
			height: 1px;
			width: 1px;
			position: absolute;
			top: 0;
			left: 0;
		}
		padding-left:  0.5em;
		padding-right: 0.5em;
		display: block;
		color: inherit;
		text-decoration: inherit;
	}
	li {
		&:focus, &.__focus {
			color: @color_tab_selected;
			background-color: @color_tab_focus;
		}
	}

	.selected {
		color: @color_tab_selected;
		background-color: @color_header_fg;
	}
}

.app > .logs {
	& > :not(.selected) {
		display: none;
	}
}

// A logger pane.
.logger-log {
	@left_border: 1em;

	// Makes it mostly behave like pre.
	// But with more wrapping.
	white-space: pre-wrap;
	word-wrap: break-word;

	// All lines.
	& > * {
		border-bottom: 0.05em solid #eee;
		padding-left: @left_border;
		min-height: @line_height;
	}

	a {
		color: @color_header_fg;
		text-decoration: underline;
		&:hover, &:focus, &:active {
			background-color: @color_tab_bg;
		}
		&:visited {
			color: @color_debug;
		}
	}

	// Specially tagged messages.
	.tickborg, .stomp, .man {
		border-left: @left_border/2 solid transparent;
		padding-left: @left_border/2;
	}
	.tickborg, .stomp {
		color: #888;
	}

	// And their (tagged) colors.
	.tickborg {
		border-left-color: @color_borg;
	}
	.stomp {
		border-left-color: @color_debug;
	}
	.stderr {
		color: #BA3300;
	}
	.man {
		border-left-color: @color_man;
		background-color: @color_man_bg;
	}

	// The previous bits of logs.
	&.backlog {
	}

	// The "live" part of the logs.
	&.newlog {
		// Adds sensible spacing at the bottom of the screen.
		padding-bottom: 0.7em;
	}

	a.truncated {
		display: block;
		animation-name: flash;
		animation-duration: 0.8s;
		animation-fill-mode: both;
		animation-timing-function: ease-in-out;
	}
}

.logger .identity {
	z-index: 1;
	background: #FFFAAF;
	color: #5270A3;
	min-height: @line_height;
	position: sticky;
	top: @header_height;
	left: 0;
	right: 0;
}

@keyframes flash {
	@low: 0.1;

	0%    {opacity: @low;}
	16.6% {opacity: 1;}
	33.3% {opacity: @low;}
	50%   {opacity: 1;}
	66.6% {opacity: @low;}
	100%  {opacity: 1;}
}