zotero/scss/components/_splitter.scss

@mixin splitter-invisible-size($side) {
	border-#{$side}: 0;
	border-#{another-side($side)}: var(--material-border-quarternary);
	margin-#{$side}: calc(1px - var(--draggable-size));
	margin-#{another-side($side)}: -1px;
	&[state="collapsed"] {
		border-#{$side}: var(--material-border-quarternary);
		border-#{another-side($side)}: 0;
		margin-#{$side}: 0;
		margin-#{another-side($side)}: 0;
	}
}

splitter {
	appearance: none;
	z-index: 1;
	position: relative;
	background: transparent;
	border: none;

	--draggable-size: 5px;
	
	@include compact {
		--draggable-size: 5px;

		&[state="collapsed"] {
			--draggable-size: 8px;
		}
	}
	@include comfortable {
		--draggable-size: 8px;

		&[state="collapsed"] {
			--draggable-size: 10px;
		}
	}

	&[orient=vertical] {
		min-height: var(--draggable-size);

		&[collapse="before"],
		&[substate="before"] {
			@include splitter-invisible-size(bottom);
		}

		&[collapse="after"],
		&[substate="after"] {
			@include splitter-invisible-size(top);
		}
	}

	&:not([orient=vertical]) {
		min-width: var(--draggable-size);

		&[collapse="before"],
		&[substate="before"],
		&[collapse="after"]:-moz-locale-dir(rtl),
		&[substate="after"]:-moz-locale-dir(rtl) {
			@include splitter-invisible-size(right);
		}

		&[collapse="after"],
		&[substate="after"],
		&[collapse="before"]:-moz-locale-dir(rtl),
		&[substate="before"]:-moz-locale-dir(rtl) {
			@include splitter-invisible-size(left);
		}
	}
}

#zotero-items-splitter,
#zotero-context-splitter,
#zotero-context-splitter-stacked {
	&[orient=vertical] {
		&[state="collapsed"] {
			margin-bottom: -1px;
			--draggable-size: 1px;
			border: 0;
		}
	}

	&:not([orient=vertical]) {
		@include splitter-invisible-size(right);

		&[state="collapsed"] {
			margin-right: -1px;
			--draggable-size: 1px;
			border: 0;
		}
	}
}