// Color variables (appears count calculates by raw css)
@color0: #000000; // Appears 7 times
@color1: #222222; // Appears 3 times
@color2: #eeeeee; // Appears 2 times
@color3: #dddddd; // Appears 2 times

@color4: #cccccc; // Appears 1 time
@color5: #444444; // Appears 1 time
@color6: #999999; // Appears 1 time
@color7: #111111; // Appears 1 time
@color8: #452500; // Appears 1 time
@color9: #555555; // Appears 1 time
@color10: #ffffff; // Appears 2 time

// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged

// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
.lm_goldenlayout {
	background: @color0;
}

// Single Pane content (area in which final dragged content is contained)
.lm_content {
	background: @color1;
	border: 1px solid transparent;
}

// Single Pane content during Drag (style of moving window following mouse)
.lm_dragProxy {
	.lm_content {
		box-shadow: 2px 2px 4px fade(@color0,90%);
	}
}

// Placeholder Container of target position
.lm_dropTargetIndicator {
	box-shadow: inset 0 0 30px @color0;
	outline: 1px dashed @color4;

	// Inner Placeholder
	.lm_inner {
		background: @color0;
		opacity: 0.2;
	}
}

// Separator line (handle to change pane size)
.lm_splitter {
	background: @color0;
	opacity: 0.001;
	transition: opacity 200ms ease;

	&:hover, // When hovered by mouse...
	&.lm_dragging {
		background: @color5;
		opacity: 1;
	}
}

// Pane Header (container of Tabs for each pane)
.lm_header {
	height: 20px;
	
	// Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
	.lm_tab {
		font-family: Arial, sans-serif;
		font-size: 12px;
		color: @color6;
		background: @color7;
		box-shadow: 2px -2px 2px fade(@color0,30%);
		margin-right: 2px;
		padding-bottom: 2px;
		padding-top: 2px;

		/*.lm_title				 // Present in LIGHT Theme
		{
			padding-top:1px;
		}*/

		// Close Tab Icon
		.lm_close_tab {
			width: 11px;
			height: 11px;
			background-image: data-uri('../img/lm_close_white.png');
			background-position: center center;
			background-repeat: no-repeat;
			top: 4px;
			right: 6px;
			opacity: 0.4;

			&:hover {
				opacity: 1;
			}
		}

		// If Tab is active, so if it's in foreground
		&.lm_active {
			border-bottom: none;
			box-shadow: 0 -2px 2px @color0;
			padding-bottom: 3px;

			.lm_close_tab {
				opacity: 1;
			}
		}
	}
}

.lm_dragProxy,
.lm_stack {
	&.lm_right {
		.lm_header .lm_tab {
			&.lm_active {
				box-shadow: 2px -2px 2px @color0;
			}
		}
	}

	&.lm_bottom {
		.lm_header .lm_tab {
			box-shadow: 2px 2px 2px fade(@color0,30%);

			&.lm_active {
				box-shadow: 0 2px 2px @color0;
			}
		}
	}
}

// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
.lm_selected {
	.lm_header {
		background-color: @color8;
	}
}

.lm_tab {
	&:hover, // If Tab is hovered
	&.lm_active // If Tab is active, so if it's in foreground
	{
		background: @color1;
		color: @color3;
	}
}

// Dropdown arrow for additional tabs when too many to be displayed
.lm_header .lm_controls .lm_tabdropdown:before {
	color: @color10;
}

// Pane controls (popout, maximize, minimize, close)
.lm_controls {
	// All Pane controls shares these
	> li {
		position: relative;
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 0.4;
		transition: opacity 300ms ease;

		&:hover {
			opacity: 1;
		}
	}

	// Icon to PopOut Pane, so move it to a different Browser Window
	.lm_popout {
		background-image: data-uri('../img/lm_popout_white.png');
	}

	// Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
	.lm_maximise {
		background-image: data-uri('../img/lm_maximise_white.png');
	}

	// Icon to Close Pane and so remove it from GoldenLayout Container
	.lm_close {
		background-image: data-uri('../img/lm_close_white.png');
	}

	// Icon to toggle Pane Docking at mouse hover 
	.lm_dock {
		background-image: data-uri('../img/lm_docked_white.png');
		transform:rotate(-45deg);
		transition:transform 300ms;
	}
}

.lm_stack.lm_docked {
	.lm_controls .lm_dock {
		transform:rotate(0deg);
	}

	> .lm_items {
		border-color: @color9;
		border-image: linear-gradient(to right, @color5 1%, @color6 100%);
		box-shadow: 0 2px 2px @color0;
	}
}

// If a specific Pane is maximized
.lm_maximised {
	// Pane Header (container of Tabs for each pane) can have different style when is Maximized
	.lm_header {
		background-color: @color0;
	}

	// Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
	.lm_controls {
		.lm_maximise {
			background-image: data-uri('../img/lm_minimize_white.png');
		}
	}
}

.lm_transition_indicator {
	background-color: @color0;
	border: 1px dashed @color9;
}

// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
.lm_popin {
	cursor: pointer;

	// Background of Icon
	.lm_bg {
		background: @color10;
		opacity: 0.3;
	}

	// Icon to Restore original position in Golden Layout Container
	.lm_icon {
		background-image: data-uri('../img/lm_popin_white.png');
		background-position: center center;
		background-repeat: no-repeat;
		border-left: 1px solid @color2;
		border-top: 1px solid @color2;
		opacity: 0.7;
	}

	&:hover {
		.lm_icon {
			opacity: 1;
		}
	}
}

.studio {
	div.editor-block.editor-can-drop {
		box-shadow: none !important;
		background: dodgerblue;
		opacity: .3;
	}

	.editor-ready {
		outline: dodgerblue 4px solid !important;
	}

	.editor-waiting {
		transition: padding .4s;
		outline: rgb(30, 71, 255) 2px dashed;
	}

	.editor-container {
		transition: box-shadow .6s;
	}

	.editor-bar {
		transition: .4s;
		padding: .1em;
		background: dodgerblue;
		position: absolute;
	}

	.editor-block {
		transition: box-shadow .3s, opacity .4s;
		text-align: center;
		width: 64px;
		display: inline-block;
	}

	.editor-dragging {
		z-index: 10000;
	}

	div.editor-dragging {
		z-index: 10000;
		box-shadow: #181818 0px 5px 20px !important;
		position: fixed;
		display: inline-block;
	}

	.editor-hover {
		outline: #2b2efc 1px solid;
		cursor: move;
	}

	.editor-active {
		outline: #2b2efc 1px solid;
		box-shadow: #181818 0px 0px 20px;
	}

	.editor-prop div {
		flex-basis: 70%;
	}

	.editor-prop label:hover {
		background: #464646;
	}

	.editor-prop label {
		line-height: 22px;
		background: #757575;
		color: white;
		transition: .3s;
		padding-left: 0.4em;
		flex-basis: 30%;
		transition: .3s;
	}

	.editor-prop {
		display: flex;
	}

	.editor-input {
		width: 100%;
		background: #424242;
		color: white;
		border: 1px dodgerblue solid;
		padding: .2em .4em;
		max-width: 100%;
		min-width: 100%;
	}

	.editor-head {
		color: white;
		background: #424242;
	}

	.editor-group {
		padding-left: 1.25em;
	}
}