.reorderable-container {
	position: relative;
	padding-top: 12px;
	box-sizing: border-box;
	height: 100%;

	.stage-inner-container {
		height: 100%;
	}

	.reorderable {
		background-color: #00aff2;
		height: 2px;
		flex-shrink: 0;
	}

	&.horizontal-align {
		padding-top: 0;
		padding-left: 10px;

		& > .reorderable-inner-container {
			& > .reorderable {
				width: 2px;
				height: 100%;
			}

		}

		& > .reorderable-zero-element {
			width: 10px;
			height: 100%;
		}
	}

	.reorderable-inner-container {
		display: flex;
		width: 100%;
		height: 100%;

		.reorderable-zero-element {
			width: 100%;
			height: 100%;
			background: none;
			position: inherit;
			bottom: 0;
			right: 0;
			flex-shrink: 1;
		}
	}
}

.reorderable-container.vertical-align {
	.reorderable-inner-container {
		flex-direction: column;
	}
}

.ts-sidebar-list > li,
.ts-sidebar-item-text-hint {
	color: @SectionPanelFontColor;
}

.ts-sidebar-list > li.ts-sidebar-selected-item,
.ts-sidebar-item-text-hint {
	color: @SectionPanelSelectedFontColor;
}

.ts-sidebar-list > li .ts-sidebar-spacer,
.ts-sidebar-list,
.left-panel {
	background-color: @SectionPanelBackgroundColor;
}

.ts-sidebar-list > li.ts-sidebar-selected-item, .ts-sidebar-list > li.ts-sidebar-selected-item .ts-sidebar-spacer,
.ts-sidebar-item-text-hint {
	background-color: @SectionPanelSelectedBackgroundColor;
}

.ts-sidebar-item-wrapper {
	&:hover {
		background-color: @SectionPanelSelectedBackgroundColor;
	}
}
