.left-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	background-color: var(--background-color);
	border-top: 2px solid rgba(110, 110, 110, 0.3);
	overflow: hidden;
	flex-shrink: 0;
	padding-right: 0.25rem;

	& .pane-divider {
		height: 10px;
		flex-shrink: 0;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			right: -2px;
			top: 50%;
			height: 3px;
			background-color: var(--app-secondary-color);
			transform: translateY(-50%);
			transition: background-color 0.2s ease;
		}

		&:hover::before,
		&:active::before {
			background-color: var(--app-primary-color);
		}

		& .resize-handle--y {
			top: 0;
			height: 100%;
		}
	}

	& .left-widget-pane {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		flex-shrink: 0;
		position: relative;
	}

	& .resize-handle--x {
		right: 0;
		left: auto;
		box-shadow: inset -3px 0 0 0 var(--app-secondary-color);

		&:hover,
		&:active {
			box-shadow: inset -3px 0 0 0 var(--app-primary-color);
		}
	}
}