/*
 * Aikar's Minecraft Timings Parser
 *
 * Written by Aikar <aikar@aikar.co>
 * http://aikar.co
 * http://starlis.com
 *
 * @license MIT
 */
@import "variables";
@import "reset";
@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";
@import "helpers";

body {
	height: 100%;
	background: $theme-background;
	color: $theme-color-text;
	font-size: 1em;
}

pre, textarea {
	word-wrap: normal;
	font-family: $monospace;
	tab-size: 4;
	overflow: visible;
	font-size: .7em;
}

.hidden {
	display: none;
}

hr {
	margin: 0;
	clear: both;
}

section {
	position: relative;
}

#top-ad {
	text-align: center;
}

#content, #tab-bar {
	min-height: 300px;
}

.dev-warning {
	padding: 5px;
	text-align: center;
	background-color: $theme-color-light;
	color: $theme-color-text-special;
}

#loading-indicator-overlay {
	background: rgba(0, 0, 0, .5);
	z-index: 2000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	> div {
		position: absolute;
		left: 40%;
		top: 130px;
	}
}

.region-details {
	clear: left;
	padding-left: 20px;
	padding-top: 10px;
}

.world-item {
	clear: left;
}

.sk-three-bounce > div {
	background-color: $theme-accent;
	margin: 15px;
	width: 50px;
	height: 50px;
}

#show-more {

	padding: 20px;
	max-width: 200px;
	margin: 20px auto auto;
	text-align: center;
	cursor: pointer;
	border: 3px solid $theme-accent;
	background: darken($theme-background-alt, 10);
}

#show-more:hover {
	background: $theme-background-alt;
}

#controls {

	float: right;
	margin-top: -47px;
	margin-right: 0;
	height: 47px;
	#filter, #type-toggle, #sort-toggle {
		height: 47px;
		float: left;
		overflow: hidden;
		margin: 0 0 0 3px;
		border: 2px solid $theme-accent;
		> div {
			height: 45px;
			text-align: center;
			min-width: 60px;
			float: left;
			display: block;
			padding: 8px 14px;
			cursor: pointer;
			font-weight: 500;

			//background: darken($theme-background-alt, 5);
			background: $theme-color-light;
		}

		.totalPct, .avg, .lag {
			border-right: 2px solid $theme-accent;
		}
		.active {
			background: darken($theme-background-alt, 10);

		}
	}
	#filter {
		width: 225px;
	}
	overflow: hidden;

}

.timing-row {

	display: table-cell;
	width: 100%;
	.name {
		word-wrap: break-word;
		display: inline-block;
		color: $theme-color-text-alt;
		max-width: 600px;
		@include less-than-xlarge-screen {
			max-width: 430px;
		}
		@include less-than-large-screen {
			max-width: 350px;
		}
		@include small-screen {
			max-width: 300px;
		}
	}

	> a {
		padding: 0 6px 0 0;
	}
	.name, .expand-control, > a {
		float: left;
	}
	.row-info {
		float: right;
	}
	.row-info-avg {
		min-width: 350px;
		text-align: right;
	}

	.row-info-total {
		margin: auto 20px;
	}

	.row-info, .row-info-total, .row-info-avg {
		display: inline-block;
		max-width: 850px;
		@include small-screen {
			display: block;
			text-align: left;
			min-width: inherit;
			width: 100%;
			margin: auto;
		}
	}
	.count, .totalPct, .totalTime, .avgMs, .tickAvgMs {
		color: $theme-color-text-alt;
	}
}

.expandable {
	display: block;
	clear: left;
	overflow: hidden;
}

.expand-prefix, .expand-arrows {
	cursor: pointer;
	float: left;
}

.expand-content {
	clear: left;
}

.full-timing-row {
	width: 100%;

	.full-child {
		width: 100%;
		display: block !important;
	}
	.indent {
		padding-left: 15px;
		border-left: 1.5px solid;
		display: table-cell;
	}
	.depthnone {
		border-left: 0;
	}
	.depth0 {
		border-left-color: lighten($theme-accent, 30);
	}
	.depth1 {
		border-left-color: darken($theme-accent, 20);
	}
	.depth2 {
		border-left-color: lighten($theme-accent, 5);
	}
	.depth3 {
		border-left-color: darken($theme-accent, 5);
	}
	.depth4 {
		border-left-color: lighten($theme-accent, 15);
	}
	.row-wrap {
		overflow: hidden;
		cursor: pointer;
	}

	.expand-control {
		cursor: pointer;
		display: inline-block;
		color: $theme-accent;
		padding: 3px 6px 0 0;
	}
	.row-wrap:hover {
		background: $theme-accent;
		.expand-control {
			color: $theme-color-text-special;
		}
	}
	.children {
		clear: both;
		width: 100%;
	}
}

.themes {
	padding: 10px;
	overflow: hidden;
	float: right;
	margin: 10px;
	height: 92px;
	.theme-icon {
		margin: 5px;
		width: 40px;
		height: 40px;
		float: left;
		cursor: pointer;
		border: solid 1px white;
		white-space: nowrap;
		overflow: hidden;
		.theme-base, .theme-bg, .theme-accent {
			width: 100%;
			display: block;
		}
		.theme-bg {
			height: 65%;
		}
		.theme-accent {
			height: 10%;
		}
		.theme-base {
			height: 25%;
		}
	}
	@each $theme, $colors in $theme-colors {
		.theme-#{$theme} {
			.theme-bg {
				background: map-get($colors, altbackground);
			}
			.theme-accent {
				background: map-get($colors, accent);
			}
			.theme-base {
				background: map-get($colors, base);
			}
			.theme-bg, .theme-accent, .theme-base {
				border-right: 5px solid lighten(map-get($colors, base), 10);
			}
		}
	}

}

.warn-high {
	color: red;
}

.warn-med {
	color: #ff7820;
}

.warn-low {
	color: #ffbf2e;
}

#tabs-config {
	overflow: hidden;
}

@import "footer";
@import "ads";
@import "historyselector";
@import "ui";
@import "minecraft";
@import "serverinfo";
@import "plugin-view";
