cleanup extra css

Remove some unused css rules that weren't cut before, and a little bit of rearranging to group "dropdown" stuff together and "tools" together.

client/homebrew/editor/snippetbar/snippetbar.less

@@ -16,12 +16,6 @@
 	text-transform: uppercase;
 	font-weight: 800;
 
-	.snippets {
-		display         : flex;
-		justify-content : flex-start;
-		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-	}
-
 	.editors {
 		display         : flex;
 		justify-content : flex-end;
@@ -118,23 +112,7 @@
 			}
 		}		
 	}
-	.snippetBarButton {
-		display        : inline-block;
-		height         : @menuHeight;
-		padding        : 0px 5px;
-		font-size      : 0.625em;
-		font-weight    : 800;
-		line-height    : @menuHeight;
-		text-transform : uppercase;
-		text-wrap      : nowrap;
-		cursor         : pointer;
-		&:hover, &.selected { background-color : #999999; }
-		i {
-			margin-right   : 3px;
-			font-size      : 1.4em;
-			vertical-align : middle;
-		}
-	}
+
 	.toggleMeta {
 		position    : absolute;
 		top         : 0px;
@@ -143,15 +121,17 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 
-	
-	.menu-wrapper {
-		.menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child {
-			.caret {
-				display: none;
-			}
-		}
+	.snippets {
+		--activeTriggerColor: blue;
+		--menuColor : red;
+		display         : flex;
+		justify-content : flex-start;
+		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 	}
 
+	// removed caret for top level items, by request (makes buttons too wide).
+	.menu-wrapper .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child .caret { display: none; }
+
 	.menu-item {
 		position    : relative;
 		display     : flex;
@@ -161,9 +141,8 @@
 		padding     : 5px;
 		cursor      : pointer;
 		width: 100%;
-		.animate(background-color);
 		&:is(.menu-list .menu-item) [class*="name"] {
-			padding-inline: 8px;
+			padding-inline: 8px;   // additional space between icon and name (helpful in Fonts menu especially).
 		}
 		.menu-name {
 			flex: 1;
@@ -228,13 +207,6 @@
 			&:hover { background-color: unset; }
 		}
 	}
-	.disabledSnippets {
-		color: grey;
-		cursor: not-allowed;
-
-		&:hover { background-color: #DDDDDD;}
-	}
-
 }
 @container editor (width < 750px) {
 	.snippetBar {