zotero/scss/components/_toolbar.scss

.toolbar {
	height: 41px !important; /* Hard-code this to fix toolbar icon compression on Linux */
	min-height: 41px; /* Needed to prevent squashing by stretched tag selector */
	margin: 0;
	padding: 0px 8px 0px 8px;
	min-width: 1px;
}

:root:-moz-locale-dir(rtl) {
	.zotero-tb-button > .toolbarbutton-icon {
		transform: scaleX(-1);
	}
}

.zotero-toolbar {
	-moz-appearance: none;
	@media (-moz-platform: macos) {
		-moz-window-dragging: drag;
	}
	@media not (-moz-platform: macos) {
		-moz-window-dragging: no-drag;
	}

	@include macOS-inactive-opacity;
}

#zotero-layout-switcher .zotero-toolbar {
	background: var(--material-toolbar);
	border-bottom: var(--material-panedivider);
}

#zotero-collections-toolbar,
#zotero-items-toolbar,
#zotero-item-pane-header,
#zotero-tabs-toolbar {
	toolbarbutton {
		width: 28px;
		height: 28px;
		padding: 0px 4px 0px 4px;

		&[type="menu"] {
			min-width: 0;
			width: 40px;
		}

		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
		}
	}
}

#zotero-items-toolbar,
#zotero-tabs-toolbar {
	toolbarbutton {
		margin: 0px 4px 0px 4px;
	}
}

#zotero-items-toolbar:first-child {
	margin-inline-start: -4px;
}

#zotero-collections-toolbar {
	border-bottom: 1px solid transparent;
}

#zotero-collections-search {
	max-width: 0;
	transition: max-width 0.2s ease;
	padding: 0;
	padding-inline-end: 6px;
	margin: 0;
	appearance: none;
}

#zotero-collections-search.visible {
	max-width: 180px; 
}

#zotero-collections-search.expanding {
	padding-inline-end: 35px;
}

/* Hide collection search on pane collapse, otherwise it still shows when focused */
#zotero-collections-pane[collapsed=true] #zotero-collections-search.visible {
	visibility: hidden;
}

/* Hide the add button on pane collapse. Otherwise, it may show on top of 'New Item' */
#zotero-collections-pane[collapsed=true] #zotero-tb-collection-add {
	visibility: hidden;
}

.zotero-tb-button {
	-moz-user-focus: normal;
}

/* Label in toolbar for dev mode or troubleshooting mode */
.toolbar-mode-warning {
	font-weight: 600;
	cursor: pointer;
	margin: 0 .8em 0 .2em;
	color: red;

	&.safe-mode {
		color: darkblue;
		@media (prefers-color-scheme: dark) {
			color: lightblue;
		}
	}
}