.settings-sidebar {
	display: flex;
	background-color: var(--joplin-background-color2);
	flex-direction: column;
	flex: 0 0 clamp(232px, 18vw, 288px);
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid var(--joplin-divider-color);
	padding: 12px 10px;
	box-sizing: border-box;

	> .searchbox {
		padding: 2px 2px 12px;
	}

	> .tablist > .separator {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		color: var(--joplin-color2);
		padding: 20px 10px 8px;
		border: 0;
		background-color: transparent;
		font-size: calc(var(--joplin-font-size) * 0.78);
		font-weight: 650;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	> .tablist > .item {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		width: 100%;
		border: none;
		min-height: 44px;
		padding: 10px 12px;
		border-radius: 7px;
		background: none;
		transition: background-color 160ms ease, color 160ms ease;
		text-align: left;
		cursor: pointer;
		font-family: inherit;
		font-size: inherit;

		&.sub {
			padding-left: 38px;
		}

		&.selected {
			background: var(--joplin-background-color-hover2);
			opacity: 1;

			> .icon {
				color: var(--joplin-color2);
			}

			> .label {
				color: var(--joplin-color2);
			}
		}

		&:not(.selected):not(.disabled) {
			opacity: 0.8;
		}

		&:hover:not(.disabled) {
			background-color: var(--joplin-background-color-hover2);
		}

		&:focus-visible {
			outline: 2px solid var(--joplin-color);
			outline-offset: 2px;
		}

		&.disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}

		> .icon {
			font-size: calc(var(--joplin-font-size) * 1.2);
			color: var(--joplin-color2);
			margin-right: 12px;
		}

		> .label {
			font-size: var(--joplin-font-size);
			font-weight: 550;
			color: var(--joplin-color2);
			white-space: nowrap;
			display: flex;
			flex: 1;
			align-items: center;
			user-select: none;

			> mark {
				background-color: var(--joplin-search-marker-background-color);
				color: var(--joplin-search-marker-color);
				padding: 0;
			}
		}
	}
}