eslint and stylelint

stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars.  As far as i can tell, the selector is not standards-track, so that is probably why.  Not sure if we want to adjsut our stylelint config to allow it?

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,9 +1,9 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
-	will-change   : transform;
-	overflow-y    : scroll;
 	padding-top   : 30px;
+	overflow-y    : scroll;
+	will-change   : transform;
 
 	:where(.pages) {
 		margin : 30px 0px;
@@ -22,20 +22,16 @@
 		width : 20px;
 
 		&:horizontal {
-			height: 20px;
 			width  : auto;
+			height : 20px;
 		}
 
 		&-thumb {
-			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
+			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
-			&:horizontal{
+			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
-				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-			}
 		}
 
-		&-corner {
+		&-corner { visibility : hidden; }
-			visibility: hidden;
-		}
 	}
 }
 
@@ -70,18 +66,14 @@
 }
 
 @media print {
-	.toolBar {
+	.toolBar { display : none; }
-		display: none;
-	}
 	.brewRenderer {
 		height      : 100%;
-		overflow-y: unset;
 		padding-top : unset;
+		overflow-y  : unset;
 		.pages {
 			margin : 0px;
-			&>.page {
+			& > .page { box-shadow : unset; }
-				box-shadow: unset;
-			}
 		}
 	}
 }

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,12 +1,12 @@
 .toolBar {
 	position         : absolute;
 	z-index          : 1;
+	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
 	gap              : 8px 30px;
 	align-items      : center;
 	justify-content  : center;
-	box-sizing       : border-box;
 	width            : 100%;
 	height           : auto;
 	padding          : 2px 0;
@@ -15,11 +15,11 @@
 	background-color : #555555;
 
 	.group {
+		box-sizing       : border-box;
 		display          : flex;
 		gap              : 0 3px;
 		align-items      : center;
 		justify-content  : center;
-		box-sizing       : border-box;
 		height           : 28px;
 	}
 
@@ -36,18 +36,18 @@
 		color          : #000000;
 		background     : #EEEEEE;
 		border         : 1px solid gray;
-		&:focus { outline : 1px solid #d3d3d3; }
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
 		&.range-input {
-			color: #D3D3D3;
-			accent-color: #d3d3d3;
 			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
   
 			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
-				cursor           : pointer; 
 				width            : 5px;
 				height           : 5px;
+				cursor           : pointer;
 				outline          : none;
 			}
 
@@ -71,8 +71,8 @@
 		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
 		&#page-input {
 			width        : 4ch;
-			text-align: center;
 			margin-right : 1ch;
+			text-align   : center;
 
 		}
 
@@ -80,21 +80,21 @@
 
 
 	button {
+		box-sizing       : content-box;
 		display          : flex;
 		align-items      : center;
 		justify-content  : center;
-		height           : 100%;
 		width            : auto;
 		min-width        : 46px;
+		height           : 100%;
 		padding          : 0 0px;
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
-		box-sizing: content-box;
 
 		&:hover { background-color : #444444; }
 
-		&:focus { outline : 1px solid #d3d3d3; }
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		&:disabled {
 			color            : #777777;