/* FIXME: Move these variables to theme variables eventually */
$handleSize: 2px;
$hitboxPadding: 5px;

.pane {
	position: relative;
	overflow: hidden;
}

.contentWrapper {
	width: 100%;
	height: 100%;
}

.handle {
	height: 100%;
}

.handleHitbox {
	position: absolute;
	/* background-color: red; */
}

.handleSide-n, .handleSide-s {
	.handleHitbox {
		cursor: ns-resize;
		padding: $hitboxPadding 0;
	}

	.handle {
		height: $handleSize;
	}
}

.handleSide-e, .handleSide-w {
	.handleHitbox {
		cursor: ew-resize;
		padding: 0 $hitboxPadding;
	}

	.handle {
		width: $handleSize;
	}
}

.handleSide-n {
	/* north / top */
	padding-top: $handleSize;

	.handleHitbox {
		top: calc(0px - $hitboxPadding);
		left: 0;
		right: 0;
	}
}

.handleSide-s {
	/* south / bottom */
	padding-bottom: $handleSize;

	.handleHitbox {
		bottom: calc(0px - $hitboxPadding);
		left: 0;
		right: 0;
	}
}

.handleSide-e {
	/* east - right */
	padding-right: $handleSize;

	.handleHitbox {
		top: 0;
		bottom: 0;
		right: calc(0px - $hitboxPadding);
	}
}

.handleSide-w {
	/* west - left */
	padding-left: $handleSize;

	.handleHitbox {
		top: 0;
		bottom: 0;
		left: calc(0px - $hitboxPadding);
	}
}