@import (reference) "global";

@splitterBackgroundColor: #ededed;
@splitterButtonBackgroundColor: #d9d9d9;
c-split-pane, .ui.split-pane {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;

	> .pane {
		position: absolute;
	}

	&.fixed-left, &.fixed-right {
		> .splitter {
			width: 4px;
			height: 100%;
			top: 0;
			&:before {
				width: 4px;
				height: 48px;
				left: 0;
				top: 50%;
				margin: -24px 0;
			}
			cursor: col-resize;
		}
		> .pane {
			height: 100% !important;
			top: 0;
		}

		> c-split-pane.main-pane, > .ui.split-pane.main-pane {
			width: auto;
		}
	}

	&.fixed-top, &.fixed-bottom {
		> .splitter {
			left: 0;
			height: 4px;
			width: 100%;
			&:before {
				height: 4px;
				width: 48px;
				top: 0;
				left: 50%;
				margin: 0 -24px;
			}
			cursor: row-resize;
		}
		> .pane {
			width: 100% !important;
			left: 0;
		}
		> c-split-pane.main-pane, > .ui.split-pane.main-pane {
			height: auto;
		}
	}

	&.fixed-left {
		> .side-pane {
			left: 0;
		}
		> .main-pane {
			right: 0;
		}
	}

	&.fixed-right {
		> .side-pane {
			right: 0;
		}
		> .main-pane {
			left: 0;
		}
	}

	&.fixed-top {
		> .side-pane {
			top: 0;
		}
		> .main-pane {
			bottom: 0;
		}
	}

	&.fixed-bottom {
		> .side-pane {
			bottom: 0;
		}
		> .main-pane {
			top: 0;
		}
	}

	> .splitter {
		background-color: @splitterBackgroundColor;
		position: absolute;
		&:before {
			position: absolute;
			content: "";
			background-color: @splitterButtonBackgroundColor;
		}
		&:hover {
			&:before {
				background-color: @primaryColor;
			}
		}
	}

}
