Refactor scrollbar styles handling

- fix Firefox >= 100 issue where the thin scrollbar becomes very very thin, i.e.
  don't use scrollbar-width:thin in Firefox
- remove separate width setting for dark mode
- move all scrollbar setting occurrences into one place

skins/elastic/styles/dark.less

@@ -12,34 +12,9 @@
 @import (reference) "variables";
 
 html.dark-mode {
-    & when not (@scrollbar-dark-width = unset) {
     scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
-        scrollbar-width: @scrollbar-dark-width;
-
-        textarea,
-        select,
-        .popover-body,
-        .popupmenu,
-        .ui-dialog-content,
-        .frame-content,
-        .formcontent,
-        .table-responsive,
-        .table-responsive-sm,
-        .scroller {
-            // Firefox does not inherit scrollbar size from the html element
-            scrollbar-width: @scrollbar-dark-width;
-        }
 
     &:not(.touch) {
-            ::-webkit-scrollbar when (@scrollbar-dark-width = auto) {
-                // Note: If we do not set the width a default scrollbar is used in Chrome.
-                // And the custom colors set below do not work
-                width: 12px;
-            }
-            ::-webkit-scrollbar when (@scrollbar-dark-width = thin) {
-                width: 6px;
-            }
-
         ::-webkit-scrollbar-track {
             background-color: @color-dark-scrollbar-track;
         }
@@ -48,7 +23,6 @@ html.dark-mode {
             background-color: @color-dark-scrollbar-thumb;
         }
     }
-    }
 
     body {
         color: @color-dark-font;
@@ -781,17 +755,11 @@ html.dark-mode {
         }
 
         .tox-menu {
-            scrollbar-width: @scrollbar-dark-width;
             background-color: @color-dark-popover-background;
             border-color: @color-dark-popover-border;
             box-shadow: none;
         }
 
-        .tox-dialog__body-nav,
-        .tox-collection__group {
-            scrollbar-width: @scrollbar-dark-width;
-        }
-
         .tox-collection__item-caret svg {
             fill: @color-dark-font;
         }
@@ -985,7 +953,6 @@ html.dark-mode {
     }
 
     .ui-menu {
-        scrollbar-width: @scrollbar-dark-width;
         background-color: @color-dark-popover-background;
         border-color: @color-dark-popover-border;
         box-shadow: none;

skins/elastic/styles/global.less

@@ -99,22 +99,28 @@ a {
 /* Scrollbar styles */
 
 html when not (@scrollbar-width = unset) {
-    scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
+    // Ignore thin width setting for Firefox, it makes the scrollbar very very thin in Firefox >= 100
+    & when not (@scrollbar-width = thin) {
         scrollbar-width: @scrollbar-width;
 
         textarea,
         select,
         .popover-body,
         .popupmenu,
+        .ui-menu,
         .ui-dialog-content,
         .frame-content,
         .formcontent,
         .table-responsive,
         .table-responsive-sm,
+        .tox-menu,
+        .tox-dialog__body-nav,
+        .tox-collection__group,
         .scroller {
             // Firefox does not inherit scrollbar size from the html element
             scrollbar-width: @scrollbar-width;
         }
+    }
 
     &:not(.touch) {
         ::-webkit-scrollbar when (@scrollbar-width = auto) {
@@ -125,7 +131,13 @@ html when not (@scrollbar-width = unset) {
         ::-webkit-scrollbar when (@scrollbar-width = thin) {
             width: 6px;
         }
+    }
+}
 
+html {
+    scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
+
+    &:not(.touch) {
         ::-webkit-scrollbar-track {
             background-color: @color-scrollbar-track;
         }

skins/elastic/styles/variables.less

@@ -55,7 +55,6 @@
 
 // Scrollbars
 @scrollbar-width:       thin; // 'auto' or 'thin' or 'unset'
-@scrollbar-dark-width:  thin; // 'auto' or 'thin' or 'unset'
 
 // Additional icons
 @icon-resize-corner:    data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16

skins/elastic/styles/widgets/editor.less

@@ -86,12 +86,6 @@ div.tox {
         background-color: @color-dialog-overlay-background;
     }
 
-    .tox-menu,
-    .tox-dialog__body-nav,
-    .tox-collection__group {
-        scrollbar-width: @scrollbar-width;
-    }
-
     .tox-dialog__header {
         height: (@layout-header-height - 1px);
         border-bottom: 1px solid @color-dialog-header-border;

skins/elastic/styles/widgets/jqueryui.less

@@ -33,7 +33,6 @@
     border-radius: .3rem;
     z-index: 240;
     position: absolute;
-    scrollbar-width: @scrollbar-width;
 
    .ui-state-active {
         border: 0 !important;