diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 5842be4ab4f7..e2d2e3a0d2be 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -133,8 +133,8 @@
   /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
      background color not visible. Anti-aliasing is not available either. Make a
      thicker outline and cancel border-radius for that case. */
-     outline: 4px solid rgb(0,200,215);
-     border-radius: 0 !important;
+  outline: 4px solid rgb(0, 200, 215);
+  border-radius: 0 !important;
 }
 
 #UITourTooltipDescription {
@@ -185,7 +185,7 @@
     width: 24px;
     height: 24px;
     /* Matches the libadwaita transition */
-    transition: background-color .2s ease;
+    transition: background-color 0.2s ease;
   }
 
   &:hover > .toolbarbutton-icon {
diff --git a/browser/themes/linux/sanitizeDialog.css b/browser/themes/linux/sanitizeDialog.css
index 07f7550f4016..8a66b3357ded 100644
--- a/browser/themes/linux/sanitizeDialog.css
+++ b/browser/themes/linux/sanitizeDialog.css
@@ -11,6 +11,7 @@
   margin-inline-start: 3px;
 }
 
+/* prettier-ignore */
 #sanitizeEverythingWarningIcon {
   list-style-image: image-set(
     "moz-icon://stock/dialog-warning?size=48" 1x,
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 9f795cd5b67b..165a5e4041a2 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -5,7 +5,7 @@
 @import url("chrome://browser/skin/browser-shared.css");
 
 :root {
-  --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
+  --arrowpanel-field-background: light-dark(rgba(249, 249, 250, 0.3), rgba(12, 12, 13, 0.3));
 }
 
 /* stylelint-disable-next-line media-query-no-invalid */
@@ -57,7 +57,7 @@
 /** End titlebar **/
 
 :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
-  border-top: 1px solid rgba(0,0,0,0.65);
+  border-top: 1px solid rgba(0, 0, 0, 0.65);
 }
 
 /* ----- BOOKMARK TOOLBAR ----- */
@@ -96,7 +96,7 @@
      resembles the system outline, bringing the Urlbar in line with panels and
      other Mac apps. */
   #urlbar[open] > #urlbar-background {
-    outline: 1px solid var(--focus-outline-color)
+    outline: 1px solid var(--focus-outline-color);
   }
 }
 
@@ -115,7 +115,7 @@
 /* ----- AUTOCOMPLETE ----- */
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
-  border-top: 1px solid #C7C7C7;
+  border-top: 1px solid #c7c7c7;
 }
 
 /* Bookmarking panel */
@@ -137,14 +137,14 @@
   margin: 0;
 }
 
-#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-row(blur, selected),
 #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
   background-color: var(--arrowpanel-dimmed);
 }
 
-#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
-#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
-#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur, selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-image(blur, selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur, selected),
 #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
   color: inherit;
 }
@@ -174,7 +174,7 @@
 }
 
 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) {
-  opacity: .9;
+  opacity: 0.9;
 }
 
 /*
@@ -186,7 +186,7 @@
 }
 
 .tab-label-container:not([selected], [multiselected]) {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .tabbrowser-tab {
diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css
index 2ba897f613dc..f0327bcfeeb8 100644
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -8,7 +8,7 @@
   scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
 }
 
-.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-icon {
+.subviewbutton:not([image], [targetURI], .bookmark-item) > .menu-icon {
   display: none;
 }
 
diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css
index 62112bd7d7c2..217a21bb8c18 100644
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -6,7 +6,7 @@
 
 :root {
   --downloads-item-height: 6em;
-  --downloads-item-font-size-factor: 0.80;
+  --downloads-item-font-size-factor: 0.8;
   --downloads-item-details-opacity: 0.7;
   --downloads-item-disabled-opacity: 0.7;
 }
diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css
index 1531d4fa3aac..da33a0054e72 100644
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -45,12 +45,12 @@
     &:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
     &[type="menu"][disabled] > .toolbarbutton-menu-dropmarker,
     &:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
-      opacity: .5;
+      opacity: 0.5;
     }
 
     &:-moz-window-inactive[disabled] > .toolbarbutton-icon,
     &:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker {
-      opacity: .25;
+      opacity: 0.25;
     }
 
     > menupopup {
diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css
index 57c1120b840a..6a8571623be3 100644
--- a/browser/themes/shared/UITour.css
+++ b/browser/themes/shared/UITour.css
@@ -23,7 +23,7 @@
     transform: scale(0.8);
   }
   50% {
-    transform: scale(1.0);
+    transform: scale(1);
   }
   to {
     transform: scale(0.8);
@@ -32,13 +32,13 @@
 
 @keyframes uitour-color {
   from {
-    border-color: #5B9CD9;
+    border-color: #5b9cd9;
   }
   50% {
-    border-color: #FF0000;
+    border-color: #ff0000;
   }
   to {
-    border-color: #5B9CD9;
+    border-color: #5b9cd9;
   }
 }
 
@@ -177,20 +177,20 @@
 
 #UITourTooltipButtons > button:not(.button-link) {
   appearance: none;
-  background-color: rgb(251,251,251);
+  background-color: rgb(251, 251, 251);
   border-radius: 3px;
   border: 1px solid;
-  border-color: rgb(192,192,192);
-  color: rgb(71,71,71);
+  border-color: rgb(192, 192, 192);
+  color: rgb(71, 71, 71);
   padding: 4px 30px;
   transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
 
 #UITourTooltipButtons > button:not(.button-link, :active):hover {
-  background-color: hsla(210,4%,10%,.15);
-  border-color: hsla(210,4%,10%,.15);
-  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
+  background-color: hsla(210, 4%, 10%, 0.15);
+  border-color: hsla(210, 4%, 10%, 0.15);
+  box-shadow: 0 1px 0 0 hsla(210, 4%, 10%, 0.05) inset;
 }
 
 #UITourTooltipButtons > label,
@@ -205,11 +205,11 @@
 
 /* The primary button gets the same color as the customize button. */
 #UITourTooltipButtons > button.button-primary {
-  background-color: rgb(116,191,67);
+  background-color: rgb(116, 191, 67);
   color: white;
   padding-inline: 30px;
 }
 
 #UITourTooltipButtons > button.button-primary:not(:active):hover {
-  background-color: rgb(105,173,61);
+  background-color: rgb(105, 173, 61);
 }
diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css
index 4f9c7592412f..a7080adb894f 100644
--- a/browser/themes/shared/addon-notification.css
+++ b/browser/themes/shared/addon-notification.css
@@ -115,5 +115,5 @@ html|ul.webext-perm-domains-list {
 
 .addon-warning-icon {
   -moz-context-properties: fill;
-  fill: #FFBF00;
+  fill: #ffbf00;
 }
diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css
index 668e65909200..4d6100ce65ef 100644
--- a/browser/themes/shared/addons/extension-controlled.css
+++ b/browser/themes/shared/addons/extension-controlled.css
@@ -30,6 +30,7 @@
   }
 }
 
+/* prettier-ignore */
 .extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning,
 .extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon {
   display: none;
diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
index 262e79a470de..252bf03da10e 100644
--- a/browser/themes/shared/addons/unified-extensions.css
+++ b/browser/themes/shared/addons/unified-extensions.css
@@ -137,7 +137,7 @@ unified-extensions-item {
 .unified-extensions-item-name,
 .unified-extensions-item-message {
   margin: 0;
-  padding-inline-start: .5em;
+  padding-inline-start: 0.5em;
   word-break: break-word;
 }
 
@@ -148,8 +148,7 @@ unified-extensions-item {
 .unified-extensions-item-menu-button.subviewbutton {
   list-style-image: url("chrome://global/skin/icons/settings.svg");
   /* subtract the child's ~1px border from the block padding */
-  padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px)
-    var(--arrowpanel-menuitem-margin-inline);
+  padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) var(--arrowpanel-menuitem-margin-inline);
   padding-inline-end: 0;
   border-radius: 0;
   /* override panelUI-shared.css */
@@ -176,7 +175,7 @@ unified-extensions-item {
   &:hover:active > .toolbarbutton-icon {
     color: var(--uei-button-active-color);
     background-color: var(--uei-button-active-bgcolor);
-    box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+    box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
   }
 
   &:focus-visible > .toolbarbutton-icon {
diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css
index 6dbd4a6a2b53..3e0bf3e4535d 100644
--- a/browser/themes/shared/autocomplete.css
+++ b/browser/themes/shared/autocomplete.css
@@ -27,7 +27,7 @@
   padding: 0 1px;
 
   --status-text-color: currentColor;
-  --status-background-color: rgba(248, 232, 28, .2);
+  --status-background-color: rgba(248, 232, 28, 0.2);
 
   > .ac-site-icon {
     margin-inline: 4px 0;
@@ -75,7 +75,7 @@
 
     &:hover,
     &[selected] {
-      background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */
+      background-color: hsla(0, 0%, 80%, 0.5); /* match arrowpanel-dimmed-further */
     }
   }
 
@@ -182,11 +182,11 @@
     fill: SelectedItemText;
   }
 
-    /* Login form autocompletion */
-    > .two-line-wrapper {
-      padding: 4px;
-      padding-inline-start: 6px;
-    }
+  /* Login form autocompletion */
+  > .two-line-wrapper {
+    padding: 4px;
+    padding-inline-start: 6px;
+  }
 
   &[originaltype="action"] > .two-line-wrapper {
     flex: 1;
@@ -219,7 +219,7 @@
   &[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] {
     /* Separator between logins and generated passwords. This uses --panel-separator-color from default
      * themes since autocomplete doesn't yet switch to dark. */
-    border-top: 1px solid hsla(210,4%,10%,.14);
+    border-top: 1px solid hsla(210, 4%, 10%, 0.14);
   }
 
   &[originaltype="action"] {
diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css
index 568ae6c2c8ed..0057b5ae44e3 100644
--- a/browser/themes/shared/blockedSite.css
+++ b/browser/themes/shared/blockedSite.css
@@ -6,7 +6,7 @@
 
 @media not (prefers-contrast) {
   :root {
-    --in-content-page-background: #A4000F;
+    --in-content-page-background: #a4000f;
     --in-content-page-color: white;
     --in-content-text-color: white;
     --in-content-primary-button-text-color: black;
diff --git a/browser/themes/shared/browser-colors.css b/browser/themes/shared/browser-colors.css
index 7e3fb4e2076d..12e2265a79e7 100644
--- a/browser/themes/shared/browser-colors.css
+++ b/browser/themes/shared/browser-colors.css
@@ -22,9 +22,9 @@
   --tabs-navbar-separator-color: ThreeDShadow;
   --tabs-navbar-separator-style: solid;
 
-  --short-notification-background: #0250BB;
-  --short-notification-gradient: #9059FF;
-  --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
+  --short-notification-background: #0250bb;
+  --short-notification-gradient: #9059ff;
+  --warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f);
 
   --urlbar-box-bgcolor: var(--button-background-color-hover);
   --urlbar-box-focus-bgcolor: var(--button-background-color);
@@ -52,7 +52,7 @@
     --link-color: light-dark(var(--color-blue-50), var(--color-cyan-50));
     --link-color-hover: light-dark(var(--color-blue-60), var(--color-cyan-30));
     --link-color-active: light-dark(var(--color-blue-70), var(--color-cyan-20));
-    --tabs-navbar-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
+    --tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
     --attention-dot-color: light-dark(#2ac3a2, #54ffbd);
 
     --toolbox-bgcolor: var(--lwt-accent-color);
@@ -61,7 +61,7 @@
     --toolbox-textcolor-inactive: var(--lwt-text-color, currentColor);
 
     @media not (prefers-contrast) {
-      --focus-outline-color: light-dark(#0061E0, #00DDFF);
+      --focus-outline-color: light-dark(#0061e0, #00ddff);
     }
   }
 
@@ -84,23 +84,17 @@
   :root:not([lwtheme]) {
     --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
     --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
-    --button-background-color: light-dark(rgba(207, 207, 216, .33), rgba(0, 0, 0, .33));
-    --button-background-color-hover: light-dark(rgba(207, 207, 216, .66), rgba(207, 207, 216, .20));
-    --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, .40));
+    --button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 0, 0, 0.33));
+    --button-background-color-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2));
+    --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4));
     --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
 
     --arrowpanel-background: light-dark(white, rgb(66, 65, 77));
     --arrowpanel-color: light-dark(black, rgb(251, 251, 254));
-    --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94));
+    --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
 
-    --arrowpanel-dimmed: light-dark(
-      color-mix(in srgb, currentColor 12%, transparent),
-      color-mix(in srgb, currentColor 17%, transparent)
-    );
-    --arrowpanel-dimmed-further: light-dark(
-      color-mix(in srgb, currentColor 20%, transparent),
-      color-mix(in srgb, currentColor 14%, transparent)
-    );
+    --arrowpanel-dimmed: light-dark(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 17%, transparent));
+    --arrowpanel-dimmed-further: light-dark(color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, currentColor 14%, transparent));
 
     --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
     --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d);
@@ -128,14 +122,14 @@
     --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
 
     --toolbar-field-border-color: transparent;
-    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
+    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
     --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
     --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
     --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
 
     --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
     --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
-    --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
+    --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51));
     --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
     --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));
 
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
index 76776f04f6ac..609ef74a4941 100644
--- a/browser/themes/shared/browser-shared.css
+++ b/browser/themes/shared/browser-shared.css
@@ -101,7 +101,7 @@ body {
      the gap around them more uniform when they are close to the field edges */
   --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
   --urlbar-searchmodeswitcher-inline-padding: 6px;
-  --urlbar-searchmodeswitcher-margin-inline-end: .45em;
+  --urlbar-searchmodeswitcher-margin-inline-end: 0.45em;
 
   --pocket-icon-fill: #ef4056;
 
@@ -109,10 +109,10 @@ body {
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
 
-  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
+  --ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67);
 
   --inactive-window-transition: 0.2s ease;
-  --inactive-titlebar-opacity: .6;
+  --inactive-titlebar-opacity: 0.6;
   /**
    * On macOS and Linux, fading the whole titlebar is the native behavior.
    *
@@ -122,7 +122,7 @@ body {
    * to account for this platform difference.
    */
   @media (-moz-platform: windows) {
-    --inactive-titlebar-opacity: .75;
+    --inactive-titlebar-opacity: 0.75;
   }
   @media (prefers-reduced-motion) {
     --inactive-window-transition: 0s;
@@ -132,11 +132,11 @@ body {
     color: var(--lwt-text-color);
   }
 
-  &[uidensity=compact] {
+  &[uidensity="compact"] {
     --urlbar-min-height: max(26px, 1.4em);
   }
 
-  &[uidensity=touch] {
+  &[uidensity="touch"] {
     --urlbar-min-height: max(34px, 1.4em);
   }
 }
@@ -186,7 +186,9 @@ body {
   :root[lwtheme-image] & {
     background-image: var(--lwt-header-image), var(--lwt-additional-images);
     background-repeat: no-repeat, var(--lwt-background-tiling);
-    background-position: right top, var(--lwt-background-alignment);
+    background-position:
+      right top,
+      var(--lwt-background-alignment);
   }
 }
 
@@ -302,21 +304,21 @@ body {
   }
 
   @media (-moz-platform: windows) {
-    :root:not([sizemode=normal]) &[type="pre-tabs"] {
+    :root:not([sizemode="normal"]) &[type="pre-tabs"] {
       display: none;
     }
   }
 
   @media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) {
-    :root:not([sizemode=normal]) &[type="pre-tabs"],
-    :root[gtktiledwindow=true] &[type="pre-tabs"] {
+    :root:not([sizemode="normal"]) &[type="pre-tabs"],
+    :root[gtktiledwindow="true"] &[type="pre-tabs"] {
       display: none;
     }
   }
 
   @media (-moz-gtk-csd-reversed-placement) {
-    :root:not([sizemode=normal]) &[type="post-tabs"],
-    :root[gtktiledwindow=true] &[type="post-tabs"] {
+    :root:not([sizemode="normal"]) &[type="post-tabs"],
+    :root[gtktiledwindow="true"] &[type="post-tabs"] {
       display: none;
     }
   }
@@ -329,7 +331,8 @@ body {
 
   /* stylelint-disable-next-line media-query-no-invalid */
   @media -moz-pref("sidebar.verticalTabs") {
-    &[type="pre-tabs"], &[type="post-tabs"] {
+    &[type="pre-tabs"],
+    &[type="post-tabs"] {
       display: none;
     }
   }
@@ -338,7 +341,10 @@ body {
 /* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown.
  * (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or
  * popup window.) */
-:root:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="false"] ~ :is(#TabsToolbar, #nav-bar) > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
+:root:not([chromehidden~="menubar"], [inFullscreen])
+  #toolbar-menubar[autohide="false"]
+  ~ :is(#TabsToolbar, #nav-bar)
+  > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
   display: none;
 }
 
@@ -347,8 +353,8 @@ body {
   display: none;
 }
 
-:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
-:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
+:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore,
+:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max {
   display: none;
 }
 
@@ -357,7 +363,7 @@ body {
   -moz-default-appearance: -moz-window-button-box;
   position: relative;
 
-  :root:not([customtitlebar], [sizemode=fullscreen]) & {
+  :root:not([customtitlebar], [sizemode="fullscreen"]) & {
     display: none;
   }
 }
@@ -395,7 +401,7 @@ body {
 }
 
 /* Hide menu elements intended for keyboard access support */
-#main-menubar[openedwithkey=false] .show-only-for-keyboard {
+#main-menubar[openedwithkey="false"] .show-only-for-keyboard {
   display: none;
 }
 
@@ -455,7 +461,7 @@ body {
   min-height: 0;
   padding-inline: 6px;
 
-  :root[uidensity=compact] & {
+  :root[uidensity="compact"] & {
     padding-inline: 2px;
   }
 
@@ -465,14 +471,20 @@ body {
   max-height: 4em;
 
   :root[sessionrestored] &:not(.instant) {
-    transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition);
+    transition:
+      min-height 170ms ease-out,
+      max-height 170ms ease-out,
+      var(--ext-theme-background-transition);
 
-    &[collapsed=true] {
-      transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+    &[collapsed="true"] {
+      transition:
+        min-height 170ms ease-out,
+        max-height 170ms ease-out,
+        visibility 170ms linear;
     }
   }
 
-  &[collapsed=true] {
+  &[collapsed="true"] {
     max-height: 0;
 
     &.instant {
@@ -483,7 +495,7 @@ body {
   /* Bookmarks toolbar empty message */
 
   /* If the toolbar is not initialized set a zero width, but retain height. */
-  &[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
+  &[collapsed="false"]:not([initialized]) > #personal-toolbar-empty {
     visibility: hidden;
     width: 0;
     overflow-x: hidden;
@@ -510,7 +522,7 @@ body {
 
 #fxms-bmb-button-wrapper,
 toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
-#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #PlacesToolbar {
+#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar {
   display: none;
 }
 
@@ -604,7 +616,9 @@ menupopup::part(drop-indicator) {
     background-color: var(--lwt-accent-color);
     background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
     background-repeat: no-repeat, var(--lwt-background-tiling);
-    background-position: right bottom, var(--lwt-background-alignment);
+    background-position:
+      right bottom,
+      var(--lwt-background-alignment);
     background-position-y: bottom !important;
   }
 
@@ -615,7 +629,10 @@ menupopup::part(drop-indicator) {
   :root[lwtheme-image] & {
     background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
     background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
-    background-position: center, right bottom, var(--lwt-background-alignment);
+    background-position:
+      center,
+      right bottom,
+      var(--lwt-background-alignment);
   }
 }
 
@@ -625,7 +642,7 @@ menupopup::part(drop-indicator) {
   align-items: center;
   margin-inline: 7px;
 
-  :root:not([privatebrowsingmode=temporary]) &,
+  :root:not([privatebrowsingmode="temporary"]) &,
   #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
     display: none;
   }
@@ -633,7 +650,7 @@ menupopup::part(drop-indicator) {
   #navigator-toolbox[tabs-hidden] #nav-bar > & {
     margin-inline-end: 12px;
 
-  /* Hide the private browsing indicator
+    /* Hide the private browsing indicator
     label when vertical tabs are enabled */
     > .private-browsing-indicator-label {
       display: none;
@@ -697,7 +714,7 @@ menupopup::part(drop-indicator) {
   box-shadow: 0 0 1.5px 1px red;
 
   &[focused] {
-    box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
+    box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4);
   }
 }
 
@@ -740,7 +757,7 @@ menupopup::part(drop-indicator) {
   list-style-image: url(chrome://global/skin/icons/help.svg);
 
   &:hover {
-    background-color: hsla(0,0%,70%,.2);
+    background-color: hsla(0, 0%, 70%, 0.2);
     border-radius: 2px;
   }
 }
@@ -1009,15 +1026,15 @@ menupopup::part(drop-indicator) {
   appearance: none;
   border-style: none;
   margin: 0;
-  background-color: rgb(0,96,223);
-  color: rgb(255,255,255);
+  background-color: rgb(0, 96, 223);
+  color: rgb(255, 255, 255);
   border-radius: 5px;
   padding: 10px;
   margin-top: 15px;
   margin-bottom: 10px;
 
   &:hover {
-    background-color: rgb(0,62,170);
+    background-color: rgb(0, 62, 170);
   }
 }
 
@@ -1240,8 +1257,8 @@ popupnotificationcontent {
 
   @media not (prefers-contrast) {
     /* TODO: Should this be in browser-colors to respect system theming on Linux? */
-    --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF);
-    --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000);
+    --swipe-nav-icon-primary-color: light-dark(#0060df, #00ddff);
+    --swipe-nav-icon-accent-color: light-dark(#ffffff, #000000);
   }
 
   > svg {
diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css
index dfa65c91bca8..8cd0d2581b4d 100644
--- a/browser/themes/shared/contextmenu.css
+++ b/browser/themes/shared/contextmenu.css
@@ -47,7 +47,7 @@
   list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
-#context-bookmarkpage[starred=true] {
+#context-bookmarkpage[starred="true"] {
   list-style-image: url("chrome://browser/skin/bookmark.svg");
 }
 
diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css
index 6c3e1d476481..d0bc0e89142e 100644
--- a/browser/themes/shared/controlcenter/panel.css
+++ b/browser/themes/shared/controlcenter/panel.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Hide all conditional elements by default. */
-:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) {
+:is([when-connection], [when-customroot], [when-mixedcontent], [when-ciphers], [when-httpsonlystatus]) {
   display: none;
 }
 
@@ -143,6 +143,7 @@
   /* The protections popup panel header text needs a different calculation because it contains an info button.
    * icon-full-width is included twice to compensate for the margin-inline-start of the text,
    * used to center it even if the header includes a info button. See .panel-header-with-info-button */
+  /* prettier-ignore */
   max-width: calc(var(--popup-width)
                   - var(--arrowpanel-menuitem-margin-inline) * 2
                   - var(--arrowpanel-header-info-icon-full-width) * 2);
@@ -150,6 +151,7 @@
 
 #identity-popup .panel-header > .subviewbutton-back + h1 > span {
   /* Same idea as above, but in the identity popup when there's a back button. */
+  /* prettier-ignore */
   max-width: calc(var(--popup-width)
                   - var(--arrowpanel-menuitem-margin-inline) * 2
                   - var(--arrowpanel-header-back-icon-full-width) * 2);
@@ -176,7 +178,7 @@
 
 /* SECURITY */
 
-#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
+#identity-popup[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure,
 #identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
   font-weight: bold;
 }
@@ -208,45 +210,45 @@
   min-height: 24px;
 }
 
-#identity-popup[connection=chrome] .identity-popup-security-connection {
+#identity-popup[connection="chrome"] .identity-popup-security-connection {
   list-style-image: url(chrome://branding/content/icon48.png);
 }
 
-#identity-popup[connection=file] .identity-popup-security-connection {
+#identity-popup[connection="file"] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
 }
 
-#identity-popup[connection=associated] .identity-popup-security-connection {
+#identity-popup[connection="associated"] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/info.svg);
 }
 
-#identity-popup[connection^=secure] .identity-popup-security-connection {
+#identity-popup[connection^="secure"] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/security.svg);
 }
 
 /* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */
-#identity-popup[ciphers=weak] .identity-popup-security-connection,
-#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection {
+#identity-popup[ciphers="weak"] .identity-popup-security-connection,
+#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/security-warning.svg);
   -moz-context-properties: fill, fill-opacity;
 }
 
-#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
-#identity-popup[connection=cert-error-page] .identity-popup-security-connection {
+#identity-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection,
+#identity-popup[connection="cert-error-page"] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/security-warning.svg);
   fill: unset;
 }
 
-#identity-popup[connection=net-error-page] .identity-popup-security-connection {
+#identity-popup[connection="net-error-page"] .identity-popup-security-connection {
   list-style-image: url(chrome://global/skin/icons/info.svg);
   fill: unset;
 }
 
-#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection {
+#identity-popup[mixedcontent~="active-loaded"][isbroken] .identity-popup-security-connection {
   list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 }
 
-#identity-popup[connection=extension] .identity-popup-security-connection {
+#identity-popup[connection="extension"] .identity-popup-security-connection {
   list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
 }
 
@@ -520,7 +522,7 @@
 
   &:hover:active {
     color: var(--button-text-color-active);
-    background-color: var(--button-background-color-active)
+    background-color: var(--button-background-color-active);
   }
 }
 
@@ -697,7 +699,7 @@
   background-repeat: no-repeat;
   background-position: center;
 
-  fill: light-dark(#0090ED, #80EBFF);
+  fill: light-dark(#0090ed, #80ebff);
 }
 
 .protections-popup-shim-allow-hint-icon {
@@ -730,7 +732,6 @@
   margin-top: auto;
 }
 
-
 /* Cookie banner state toggles for the popup menu item */
 
 #protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected,
diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
index dc7f07a75f3d..deecc7e8f472 100644
--- a/browser/themes/shared/customizableui/customizeMode.css
+++ b/browser/themes/shared/customizableui/customizeMode.css
@@ -7,7 +7,7 @@
 /* Customization mode */
 
 :root {
-  --drag-drop-transition-duration: .3s;
+  --drag-drop-transition-duration: 0.3s;
 
   @media (prefers-reduced-motion: reduce) {
     --drag-drop-transition-duration: 0s;
@@ -78,7 +78,7 @@ toolbar[overflowable][customizing] > .customization-target {
   align-items: center;
   flex-shrink: 0;
   flex-wrap: wrap;
-  border-top: 1px solid rgba(0,0,0,.15);
+  border-top: 1px solid rgba(0, 0, 0, 0.15);
   padding: 10px;
 
   > .footer-button,
@@ -96,7 +96,7 @@ toolbar[overflowable][customizing] > .customization-target {
 
 #customization-palette {
   padding: 5px 20px 20px;
-  transition: opacity .3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
   opacity: 0;
 
   &:not([hidden]) {
@@ -144,7 +144,7 @@ toolbarpaletteitem {
 
   > toolbarspring {
     outline: 1px solid;
-    opacity: .6;
+    opacity: 0.6;
 
     &[removable="false"] {
       outline: 1px dashed;
@@ -238,7 +238,7 @@ toolbarpaletteitem {
 
     &:not([mousedown]):focus-visible {
       /* Delay adding the focusring back until after the transform transition completes. */
-      transition: outline-width .01s linear var(--drag-drop-transition-duration);
+      transition: outline-width 0.01s linear var(--drag-drop-transition-duration);
       outline: var(--default-focusring);
 
       &[place="toolbar"] {
@@ -263,8 +263,7 @@ toolbarpaletteitem {
   }
 
   #PersonalToolbar & toolbarbutton[checked="true"],
-  toolbar & toolbarbutton[checked="true"]
-    > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
+  toolbar & toolbarbutton[checked="true"] > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
     background-color: revert !important;
   }
 
@@ -272,7 +271,7 @@ toolbarpaletteitem {
   > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
   > #search-container,
   > toolbaritem.toolbaritem-combined-buttons {
-    transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
+    transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important;
   }
 
   &[mousedown] {
@@ -414,7 +413,9 @@ toolbarpaletteitem {
     @media (-moz-platform: macos) {
       /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
        * as best as we can here: */
-      box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3);
+      box-shadow:
+        0 0 1px hsla(0, 0%, 0%, 0.3),
+        0 4px 10px hsla(0, 0%, 0%, 0.3);
       appearance: none;
       border-radius: var(--arrowpanel-border-radius);
     }
@@ -422,7 +423,7 @@ toolbarpaletteitem {
     @media not (-moz-platform: macos) {
       border: 1px solid var(--arrowpanel-border-color);
       margin: 0;
-      box-shadow: 0 0 4px hsla(0,0%,0%,.2);
+      box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2);
     }
   }
 }
@@ -657,10 +658,28 @@ toolbarpaletteitem {
 }
 
 @keyframes kcode {
-  0% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
-  20% { border-color: rgb(252,82,27); color: rgb(252,82,27); }
-  40% { border-color: rgb(251,179,0); color: rgb(251,179,0); }
-  60% { border-color: rgb(105,211,0); color: rgb(105,211,0); }
-  80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
-  100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+  0% {
+    border-color: rgb(195, 17, 206);
+    color: rgb(195, 17, 206);
+  }
+  20% {
+    border-color: rgb(252, 82, 27);
+    color: rgb(252, 82, 27);
+  }
+  40% {
+    border-color: rgb(251, 179, 0);
+    color: rgb(251, 179, 0);
+  }
+  60% {
+    border-color: rgb(105, 211, 0);
+    color: rgb(105, 211, 0);
+  }
+  80% {
+    border-color: rgb(20, 155, 249);
+    color: rgb(20, 155, 249);
+  }
+  100% {
+    border-color: rgb(195, 17, 206);
+    color: rgb(195, 17, 206);
+  }
 }
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
index d6f1d41f4c8d..c05ba693e3a8 100644
--- a/browser/themes/shared/customizableui/panelUI-shared.css
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -27,10 +27,10 @@
   --panel-and-palette-icon-size: 16px;
 
   &:not([lwtheme]) {
-    --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+    --panel-separator-zap-gradient: linear-gradient(90deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
   }
 
-  &[uidensity=compact] {
+  &[uidensity="compact"] {
     --arrowpanel-menuitem-margin-inline: 4px;
     --arrowpanel-menuitem-padding-block: 4px;
     --panel-separator-margin-horizontal: 4px;
@@ -55,8 +55,7 @@ menupopup {
   /* The min-height is calculated with the separator's horizontal margin rather
    * than the vertical, to let the back icon have even spacing all around
    * while being aligned with the separator. */
-  --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width)
-                                       + (var(--panel-separator-margin-horizontal) * 2));
+  --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2));
 }
 
 #PanelUI-menu-button {
@@ -254,7 +253,7 @@ panelview {
   border-radius: var(--toolbarbutton-border-radius);
   flex-shrink: 0;
 
-  &[disabled=true] {
+  &[disabled="true"] {
     visibility: hidden;
   }
 
@@ -286,8 +285,8 @@ panelview {
   display: none;
 }
 
-#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
-#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
+#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls,
+#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls,
 :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
   margin: var(--arrowpanel-menuitem-margin);
 }
@@ -406,7 +405,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
     background-image: url("chrome://global/skin/icons/delete.svg");
     background-size: contain;
     -moz-context-properties: fill;
-    fill: #FFF;
+    fill: #fff;
     animation: none;
   }
 }
@@ -474,10 +473,11 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
 
 @media (prefers-reduced-motion: no-preference) {
   #confirmation-hint-message-container {
-    transform: scale(.8);
+    transform: scale(0.8);
     opacity: 0;
-    transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
-                opacity 60ms linear;
+    transition:
+      transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18),
+      opacity 60ms linear;
 
     #confirmation-hint-checkmark-animation-container[animate] + & {
       transform: scale(1);
@@ -517,10 +517,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
   min-width: calc(var(--menu-panel-width) + 32px);
 }
 
-.toolbaritem-combined-buttons:is(
-  :not([cui-areatype="toolbar"]),
-  [overflowedItem=true]
-) > toolbarbutton > .toolbarbutton-icon {
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
@@ -539,8 +536,8 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
     transform: scale(1);
   }
   100% {
-    opacity: 0 ;
-    transform: scale(.5);
+    opacity: 0;
+    transform: scale(0.5);
   }
 }
 
@@ -624,8 +621,12 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 /* FxAccount indicator bits. */
 
 @keyframes syncRotate {
-  from { transform: rotate(0); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -671,7 +672,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 }
 
 #PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button {
-  display: none
+  display: none;
 }
 
 :root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
@@ -722,8 +723,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
   font-weight: 600;
 }
 
-:root[fxadisabled=true] #appMenu-fxa-status2,
-:root[fxadisabled=true] #appMenu-fxa-separator {
+:root[fxadisabled="true"] #appMenu-fxa-status2,
+:root[fxadisabled="true"] #appMenu-fxa-separator {
   display: none;
 }
 
@@ -820,7 +821,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
   }
 }
 
-
 /* Firefox Account Toolbar Panel */
 
 #fxa-avatar-image {
@@ -944,9 +944,9 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
   font-weight: lighter;
 
   @media (-moz-platform: linux) {
-     /* Use 300 on Linux because 100 is too light (lacks contrast with
+    /* Use 300 on Linux because 100 is too light (lacks contrast with
      * the background) for some fonts in combination with anti-aliasing. */
-     font-weight: 300;
+    font-weight: 300;
   }
 }
 
@@ -1041,23 +1041,23 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
 }
 
 .sendToDevice-device {
-  &[clientType=phone] {
+  &[clientType="phone"] {
     list-style-image: url("chrome://browser/skin/device-phone.svg");
   }
 
-  &[clientType=tablet] {
+  &[clientType="tablet"] {
     list-style-image: url("chrome://browser/skin/device-tablet.svg");
   }
 
-  &[clientType=desktop] {
+  &[clientType="desktop"] {
     list-style-image: url("chrome://browser/skin/device-desktop.svg");
   }
 
-  &[clientType=tv] {
+  &[clientType="tv"] {
     list-style-image: url("chrome://browser/skin/device-tv.svg");
   }
 
-  &[clientType=vr] {
+  &[clientType="vr"] {
     list-style-image: url("chrome://browser/skin/device-vr.svg");
   }
 
@@ -1138,7 +1138,8 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
   display: block;
 }
 
-#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
+#PanelUI-remotetabs[mainview] {
+  /* panel anchored to toolbar button might be too skinny */
   min-width: 19em;
 
   .PanelUI-remotetabs-notabsforclient-label {
@@ -1148,6 +1149,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
   /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
    the panel is anchored to a toolbar button.
   */
+  /* prettier-ignore */
   #PanelUI-remotetabs-setupsync,
   #PanelUI-remotetabs-syncdisabled,
   #PanelUI-remotetabs-reauthsync,
@@ -1341,7 +1343,7 @@ panelview .toolbarbutton-1,
 }
 
 #appMenu-zoomReset-button2 > .toolbarbutton-text,
-#appMenu-fullscreen-button2 > .toolbarbutton-icon  {
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
   border-radius: 2px;
 }
 
@@ -1473,10 +1475,7 @@ panelview .toolbarbutton-1 {
   panelview .toolbarbutton-1,
   toolbarbutton.subviewbutton,
   .widget-overflow-list .toolbarbutton-1,
-  .toolbaritem-combined-buttons:is(
-    :not([cui-areatype="toolbar"]),
-    [overflowedItem=true]
-  ) > toolbarbutton
+  .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton
 ) {
   color: var(--button-text-color-ghost);
   background-color: var(--button-background-color-ghost);
@@ -1499,7 +1498,7 @@ panelview .toolbarbutton-1 {
     &:active {
       color: var(--button-text-color-ghost-active);
       background-color: var(--button-background-color-ghost-active);
-      box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+      box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
     }
   }
 }
@@ -1534,7 +1533,9 @@ panelview .toolbarbutton-1 {
 }
 
 .PanelUI-tabitem-container {
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 
   &.tabitem-removed {
     opacity: 0;
@@ -1553,23 +1554,22 @@ panelview .toolbarbutton-1 {
 }
 
 toolbarbutton[itemtype="showmorebutton"],
-  toolbarbutton[itemtype="showinactivebutton"] {
-    padding-inline-start: 0;
+toolbarbutton[itemtype="showinactivebutton"] {
+  padding-inline-start: 0;
 
-    > label {
-      /* Needed to properly left-align with the rest of list */
-      margin-inline-start: -8px;
-    }
+  > label {
+    /* Needed to properly left-align with the rest of list */
+    margin-inline-start: -8px;
   }
+}
 
 .remote-tabs-close-button {
   .toolbarbutton-icon {
-      /* To match the nav elements in the panel */
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: 0.6;
-  display: flex;
-
+    /* To match the nav elements in the panel */
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    fill-opacity: 0.6;
+    display: flex;
   }
 }
 
@@ -1579,10 +1579,7 @@ toolbarbutton[itemtype="showmorebutton"],
 }
 
 .toolbaritem-combined-buttons {
-  &:where(:not(.unified-extensions-item)):is(
-    :not([cui-areatype="toolbar"]),
-    [overflowedItem=true]
-  ) > toolbarbutton {
+  &:where(:not(.unified-extensions-item)):is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton {
     border: 0;
     margin: 0;
     flex: 1;
@@ -1595,22 +1592,16 @@ toolbarbutton[itemtype="showmorebutton"],
     display: none;
   }
 
-  &:is(
-    :not([cui-areatype="toolbar"]),
-    [overflowedItem=true]
-  ) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+  &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
     opacity: 0.4;
     /* Override toolbarbutton.css which sets the color to GrayText */
     color: inherit;
   }
 
-  &:is(
-    :not([cui-areatype="toolbar"]),
-    [overflowedItem=true]
-  ) > separator {
+  &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > separator {
     appearance: none;
     align-items: stretch;
-    margin: .5em 0;
+    margin: 0.5em 0;
     width: 1px;
     height: auto;
     background: var(--panel-separator-color);
@@ -1619,10 +1610,7 @@ toolbarbutton[itemtype="showmorebutton"],
     transition-timing-function: ease;
   }
 
-  &:is(
-    :not([cui-areatype="toolbar"]),
-    [overflowedItem=true]
-  ):hover > separator {
+  &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]):hover > separator {
     margin: 0;
   }
 }
@@ -1641,7 +1629,7 @@ toolbarbutton[itemtype="showmorebutton"],
 
   .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
     text-align: start;
-    padding-inline-start: .5em;
+    padding-inline-start: 0.5em;
   }
 
   > #stop-reload-button > .toolbarbutton-1 {
@@ -1712,7 +1700,7 @@ toolbarbutton[itemtype="showmorebutton"],
     border: 1px solid rgba(110, 110, 110, 0.4);
     border-radius: 50%;
     margin: 1px 5px;
-    background-color: rgba(150,150,150,0.2);
+    background-color: rgba(150, 150, 150, 0.2);
   }
 
   > .radio-check[selected] {
@@ -1853,8 +1841,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
 
   &.panel-header-with-info-button > .subviewbutton-back + h1 {
     margin-inline-start: 0;
-    margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width)
-                            - var(--arrowpanel-header-info-icon-full-width));
+    margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) - var(--arrowpanel-header-info-icon-full-width));
   }
 
   &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
@@ -1900,16 +1887,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
   #info-message-container {
     height: 260px;
     overflow: hidden;
-    transition: margin-bottom .25s;
+    transition: margin-bottom 0.25s;
   }
 
   #info-message-container[disabled] {
     /* Offset the height when hidden. This makes the panel content
     * cover the info message and reveal it as it slides down, rather
     * than the info message growing in height. */
-   margin-bottom: -260px;
-   pointer-events: none;
- }
+    margin-bottom: -260px;
+    pointer-events: none;
+  }
 
   #info-message-container[disabled] #protections-popup-message {
     opacity: 0;
@@ -1921,7 +1908,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
   align-items: flex-end;
   height: calc(100% - 20px);
   margin: 10px;
-  transition: opacity .25s;
+  transition: opacity 0.25s;
   opacity: 1;
   background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
   background-repeat: no-repeat;
@@ -1969,11 +1956,11 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
 
   &[viewId="PanelUI-profiler"] {
     --panel-width: 319px;
-   }
+  }
 
-   /* Override themes for the Pocket panel, because the Pocket
+  /* Override themes for the Pocket panel, because the Pocket
    panel currently only supports dark and light themes. */
-  @media not (prefers-color-scheme: dark){
+  @media not (prefers-color-scheme: dark) {
     &[viewId="PanelUI-savetopocket"] {
       --arrowpanel-background: #fbfbfb;
     }
@@ -1989,7 +1976,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
     background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
     color: #fff;
 
-     &:-moz-locale-dir(rtl) {
+    &:-moz-locale-dir(rtl) {
       background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
     }
 
@@ -2011,15 +1998,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
    "false". When the DOM is being initialized it is set to "false" so that animations
    do not run. */
   &[animationready="true"] #PanelUI-profiler-info {
-    transition: margin-block-end 250ms, opacity 250ms;
+    transition:
+      margin-block-end 250ms,
+      opacity 250ms;
   }
 }
 
 #PanelUI-profiler-info {
   min-height: 180px;
   padding: 0 15px 15px;
-  background: top 10px right no-repeat
-    url("chrome://browser/skin/profiler-popup-backdrop.png");
+  background: top 10px right no-repeat url("chrome://browser/skin/profiler-popup-backdrop.png");
   opacity: 1;
 }
 
@@ -2057,7 +2045,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
 }
 
 #PanelUI-profiler-content-edit-settings {
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
 .PanelUI-profiler-content-label {
@@ -2066,7 +2054,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
 
 #PanelUI-profiler-content-description {
   margin-block: 4px;
-  font-size: .9em;
+  font-size: 0.9em;
   color: var(--text-color-deemphasized);
 }
 
@@ -2141,7 +2129,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
 
 /* Web-extension pop-ups */
 
-.cui-widget-panelview[id^=PanelUI-webext-] {
+.cui-widget-panelview[id^="PanelUI-webext-"] {
   border-radius: var(--arrowpanel-border-radius);
 }
 
diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css
index ea762166d867..e3c557873e71 100644
--- a/browser/themes/shared/downloads/download-blockedStates.css
+++ b/browser/themes/shared/downloads/download-blockedStates.css
@@ -16,14 +16,14 @@
 #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
   background-image: url("chrome://global/skin/icons/error.svg");
   -moz-context-properties: fill;
-  fill: light-dark(#e22850, #FF9AA2);
+  fill: light-dark(#e22850, #ff9aa2);
 }
 
 #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
 #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
   background-image: url("chrome://global/skin/icons/info-filled.svg");
   -moz-context-properties: fill;
-  fill: light-dark(#0090ED, #80EBFF);
+  fill: light-dark(#0090ed, #80ebff);
 }
 
 .downloadsPanel-blockedSubview-image {
@@ -43,7 +43,7 @@
 #downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image,
 #downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image,
 #downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge,
-#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge  {
+#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge {
   -moz-context-properties: fill;
   fill: #ffbf00;
   background-image: url("chrome://global/skin/icons/warning.svg");
diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css
index 3b894e09ccd8..3d244e4a20d8 100644
--- a/browser/themes/shared/downloads/indicator.css
+++ b/browser/themes/shared/downloads/indicator.css
@@ -105,7 +105,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
 }
 
 #downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  background: url(chrome://browser/skin/notification-fill-12.svg)  no-repeat center;
+  background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
   fill: var(--panel-banner-item-info-icon-bgcolor);
 }
 
@@ -116,7 +116,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
 
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
-  fill: light-dark(rgb(226,40,80), rgb(255,132,138));
+  fill: light-dark(rgb(226, 40, 80), rgb(255, 132, 138));
 }
 
 #downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
@@ -179,7 +179,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
   transform: translateX(0);
 }
 #downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
- stroke: currentColor;
+  stroke: currentColor;
 }
 
 #downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
@@ -202,10 +202,12 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
     animation-timing-function: steps(18);
     transform: translateX(0);
   }
-  14.28% { /* 18th frame (18/126) */
+  14.28% {
+    /* 18th frame (18/126) */
     transform: translateX(calc(18 * -20px));
   }
-  93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */
+  93.65% {
+    /* Wait 100 frames of time, but resume from 18th frame (118/126) */
     animation-timing-function: steps(8);
     transform: translateX(calc(18 * -20px));
   }
diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
index 8d15d8cfee54..e81b2dbc2b6e 100644
--- a/browser/themes/shared/downloads/progressmeter.css
+++ b/browser/themes/shared/downloads/progressmeter.css
@@ -7,7 +7,7 @@
 :root {
   --download-progress-fill-color: var(--toolbarbutton-icon-fill-attention);
   --download-progress-paused-color: GrayText;
-  --download-progress-flare-color: rgba(255,255,255,0.75);
+  --download-progress-flare-color: rgba(255, 255, 255, 0.75);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -61,11 +61,14 @@
      Create a gradient with 2 identical patterns, and enlarge the size to 200%.
      This allows us to animate background-position with percentage. */
   background-color: var(--download-progress-fill-color);
-  background-image: linear-gradient(90deg, transparent 0%,
-                                           var(--download-progress-flare-color) 25%,
-                                           transparent 50%,
-                                           var(--download-progress-flare-color) 75%,
-                                           transparent 100%);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--download-progress-flare-color) 25%,
+    transparent 50%,
+    var(--download-progress-flare-color) 75%,
+    transparent 100%
+  );
   background-blend-mode: normal;
   background-size: 200% 100%;
   animation: downloadProgressSlideX 1.5s linear infinite;
diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css
index 175ad229ea25..2083dbe71394 100644
--- a/browser/themes/shared/formautofill-notification.css
+++ b/browser/themes/shared/formautofill-notification.css
@@ -174,7 +174,6 @@
   }
 }
 
-
 /* Default size for input fields in address edit doorhanger */
 .address-edit-notification-content {
   :is(input, textarea) {
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
index fab73b174f53..84fad49a26e1 100644
--- a/browser/themes/shared/identity-block/identity-block.css
+++ b/browser/themes/shared/identity-block/identity-block.css
@@ -46,14 +46,14 @@
   outline: var(--toolbarbutton-outline);
   outline-offset: var(--toolbarbutton-outline-offset);
 
-  &:hover:not([open=true]) {
+  &:hover:not([open="true"]) {
     background-color: var(--urlbar-box-hover-bgcolor);
     color: var(--urlbar-box-hover-text-color);
     outline-color: var(--toolbarbutton-hover-outline-color);
   }
 
   &:hover:active,
-  &[open=true] {
+  &[open="true"] {
     background-color: var(--urlbar-box-active-bgcolor);
     color: var(--urlbar-box-hover-text-color);
     outline-color: var(--toolbarbutton-active-outline-color);
@@ -201,7 +201,6 @@
   fill: unset;
 }
 
-
 #identity-box[pageproxystate="valid"].notSecure #identity-icon,
 #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
 #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon {
@@ -216,7 +215,7 @@
   display: none;
 }
 
-#identity-permission-box[open=true],
+#identity-permission-box[open="true"],
 #identity-permission-box[hasPermissions],
 #identity-permission-box[hasSharingIcon] {
   display: flex;
diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css
index 9c24eb8a37de..c5e8f9f77ba1 100644
--- a/browser/themes/shared/migration/migration-wizard.css
+++ b/browser/themes/shared/migration/migration-wizard.css
@@ -13,7 +13,7 @@
 }
 
 h1 {
-  font-size: var(--embedded-wizard-header-font-size, 1.30em);
+  font-size: var(--embedded-wizard-header-font-size, 1.3em);
   font-weight: var(--embedded-wizard-header-font-weight, normal);
   margin-block: var(--embedded-wizard-header-margin-block, 0 16px);
   min-height: 1em;
@@ -156,15 +156,15 @@ div[name="page-selection"]:not([show-import-all]) summary {
   display: none;
 }
 
-div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all)  {
+div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) {
   margin-inline: var(--resource-type-label-margin-inline, 24px 0);
 }
 
-div[name="page-selection"][show-import-all] #select-all  {
+div[name="page-selection"][show-import-all] #select-all {
   display: flex;
 }
 
-div[name="page-selection"][show-import-all][hide-select-all] #select-all  {
+div[name="page-selection"][show-import-all][hide-select-all] #select-all {
   display: none;
 }
 
@@ -239,9 +239,10 @@ summary {
 .resource-progress-group {
   display: grid;
   grid-template-columns: min-content auto;
-  grid-template-areas: "icon type"
-                       "icon status"
-                       "icon support";
+  grid-template-areas:
+    "icon type"
+    "icon status"
+    "icon support";
   align-items: center;
   justify-items: start;
 }
@@ -385,7 +386,7 @@ summary {
 
 div[name="page-selection"]:not([no-resources]) .no-resources-found,
 div[name="page-selection"]:not([no-permissions]) .no-permissions-message,
-div[name="page-selection"]:is([no-resources],[no-permissions]) .hide-on-error,
+div[name="page-selection"]:is([no-resources], [no-permissions]) .hide-on-error,
 div[name="page-selection"]:not([file-import-error]) .file-import-error {
   display: none;
 }
@@ -397,8 +398,9 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
 .resource-selection-details > summary {
   list-style: none;
   display: grid;
-  grid-template-areas: "a b"
-                       "c b";
+  grid-template-areas:
+    "a b"
+    "c b";
   margin-block: 16px 0;
 }
 
@@ -407,7 +409,7 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
 }
 
 p.migration-wizard-subheader {
-  font-size: var(--embedded-wizard-subheader-font-size, .85em);
+  font-size: var(--embedded-wizard-subheader-font-size, 0.85em);
   font-weight: var(--embedded-wizard-subheader-font-weight, 400);
   margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px);
   line-height: 1.2em;
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
index f17b7d64f887..086336bbfcd3 100644
--- a/browser/themes/shared/notification-icons.css
+++ b/browser/themes/shared/notification-icons.css
@@ -13,12 +13,12 @@
   border-radius: var(--urlbar-icon-border-radius);
 
   &:hover {
-    background-color: hsla(0,0%,70%,.2);
+    background-color: hsla(0, 0%, 70%, 0.2);
   }
 
   &:hover:active,
   &[open] {
-    background-color: hsla(0,0%,70%,.3);
+    background-color: hsla(0, 0%, 70%, 0.3);
   }
 }
 
@@ -158,7 +158,6 @@
   }
 }
 
-
 .screen-icon {
   list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
 
@@ -250,16 +249,24 @@
   list-style-image: url("chrome://browser/skin/drm-icon.svg");
 }
 
-.notification-anchor-icon[animate=true],
-#eme-notification-icon[firstplay=true] {
+.notification-anchor-icon[animate="true"],
+#eme-notification-icon[firstplay="true"] {
   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
 }
 
 @keyframes emeTeachingMoment {
-  0% {transform: translateX(0); }
-  25% {transform: translateX(3px) }
-  75% {transform: translateX(-3px) }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(3px);
+  }
+  75% {
+    transform: translateX(-3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 /* INSTALL ADDONS */
diff --git a/browser/themes/shared/pageInfo.css b/browser/themes/shared/pageInfo.css
index 04f9171592ff..eac8b0b677eb 100644
--- a/browser/themes/shared/pageInfo.css
+++ b/browser/themes/shared/pageInfo.css
@@ -96,12 +96,12 @@
   }
 
   #viewGroup > radio:hover {
-    background-color: #E0E8F6;
+    background-color: #e0e8f6;
     color: black;
   }
 
   #viewGroup > radio[selected="true"] {
-    background-color: #C1D2EE;
+    background-color: #c1d2ee;
     color: black;
   }
 
@@ -128,9 +128,9 @@
   }
 
   @media (-moz-mac-big-sur-theme: 0) {
-    #viewGroup > radio[selected=true],
-    #viewGroup > toolbarbutton[checked=true] {
-      color: #FFF !important;
+    #viewGroup > radio[selected="true"],
+    #viewGroup > toolbarbutton[checked="true"] {
+      color: #fff !important;
       text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
     }
   }
@@ -138,7 +138,7 @@
 
 /* Misc */
 tree {
-  margin: .5em;
+  margin: 0.5em;
 }
 
 html|input {
@@ -152,7 +152,7 @@ html|input.header {
 }
 
 #imagecontainerbox {
-  margin: .5em;
+  margin: 0.5em;
   background: white;
   overflow: auto;
   border: 1px solid ThreeDLightShadow;
@@ -200,7 +200,7 @@ html|input:disabled {
 
 @media not (-moz-platform: macos) {
   #mediaSplitter {
-    height: .8em;
+    height: 0.8em;
   }
 }
 
@@ -222,7 +222,7 @@ treechildren::-moz-tree-cell-text(broken) {
 #permList {
   appearance: auto;
   -moz-default-appearance: listbox;
-  margin: .5em;
+  margin: 0.5em;
   overflow: auto;
   color: FieldText;
 }
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
index bb4973f446b8..10c407df5a0c 100644
--- a/browser/themes/shared/places/sidebar.css
+++ b/browser/themes/shared/places/sidebar.css
@@ -35,15 +35,7 @@
   color: var(--lwt-sidebar-text-color);
   color-scheme: light;
 
-  scrollbar-color:
-    light-dark(
-      rgba(204,204,204,.5),
-      rgba(249,249,250,.4)
-    )
-    light-dark(
-      rgba(230,230,235,.5),
-      rgba(20,20,25,.3)
-    );
+  scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3));
 }
 
 .sidebar-panel[lwt-sidebar="dark"] {
@@ -52,7 +44,7 @@
 
 .sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren {
   &::-moz-tree-row(selected) {
-    background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
+    background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1));
   }
 
   &::-moz-tree-image(selected),
@@ -116,8 +108,8 @@
 }
 
 @media (-moz-platform: windows) {
-  :root[uidensity=touch] #search-box,
-  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  :root[uidensity="touch"] #search-box,
+  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
     min-height: 32px;
   }
 
@@ -126,7 +118,7 @@
     padding: 0 4px;
   }
 
-  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf),
   .sidebar-placesTreechildren::-moz-tree-image(leaf) {
     cursor: pointer;
   }
@@ -176,12 +168,12 @@
     margin-inline-start: 4px;
   }
 
-  :root[uidensity=touch] #search-box,
-  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  :root[uidensity="touch"] #search-box,
+  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
     min-height: 32px;
   }
 
-  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf),
   .sidebar-placesTreechildren::-moz-tree-image(leaf) {
     cursor: pointer;
   }
@@ -203,7 +195,7 @@
     font-size: 1.0909rem;
   }
 
-  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
     min-height: 32px;
   }
 
diff --git a/browser/themes/shared/preferences/applications.css b/browser/themes/shared/preferences/applications.css
index 36f871fae1ca..e3ead0f509cb 100644
--- a/browser/themes/shared/preferences/applications.css
+++ b/browser/themes/shared/preferences/applications.css
@@ -20,6 +20,7 @@ menuitem[appHandlerIcon="save"] > .menu-icon {
   @media not (-moz-platform: linux) {
     content: url("chrome://browser/skin/preferences/saveFile.png");
   }
+  /* prettier-ignore */
   @media (-moz-platform: linux) {
     content: image-set(
       "moz-icon://stock/document-save?size=16" 1x,
diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
index f8b3e2039e74..76d1f8e51670 100644
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -5,18 +5,18 @@
 @import url("chrome://global/skin/in-content/info-pages.css");
 
 @media not (prefers-contrast) {
-html.private {
-  --in-content-page-color: white;
-  --in-content-text-color: white;
-  --in-content-page-background: #25003e;
-  --link-color: white;
-  --link-color-hover: white;
-  --link-color-active: white;
-  --in-content-banner-background: #f9f9fe;
-  --in-content-banner-text-color: #0c0c0d;
-  --in-content-button-background-hover: rgba(12,12,13,.1);
-  --in-content-button-background-active: rgba(12,12,13,.15);
-}
+  html.private {
+    --in-content-page-color: white;
+    --in-content-text-color: white;
+    --in-content-page-background: #25003e;
+    --link-color: white;
+    --link-color-hover: white;
+    --link-color-active: white;
+    --in-content-banner-background: #f9f9fe;
+    --in-content-banner-text-color: #0c0c0d;
+    --in-content-button-background-hover: rgba(12, 12, 13, 0.1);
+    --in-content-button-background-active: rgba(12, 12, 13, 0.15);
+  }
 }
 
 /**
@@ -63,7 +63,8 @@ p {
 }
 
 .logo {
-  background: image-set(url("chrome://branding/content/about-logo-private.png"), url('chrome://branding/content/about-logo-private@2x.png') 2x) no-repeat center center;
+  background: image-set(url("chrome://branding/content/about-logo-private.png"), url("chrome://branding/content/about-logo-private@2x.png") 2x) no-repeat center
+    center;
   background-size: 96px;
   display: inline-block;
   height: 96px;
@@ -106,12 +107,12 @@ p {
 }
 
 .promo.top {
-  background: rgba(255, 255, 255, .2);
+  background: rgba(255, 255, 255, 0.2);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, .3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .promo.top .promo-image-large {
@@ -165,7 +166,9 @@ p {
   background-size: 24px;
   border: solid 1px rgba(249, 249, 250, 0.2);
   border-radius: 3px;
-  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
+  box-shadow:
+    0 1px 4px 0 rgba(12, 12, 13, 0.2),
+    0 0 0 1px rgba(0, 0, 0, 0.15);
   cursor: text;
   font-size: 15px;
   font-weight: normal;
@@ -181,7 +184,9 @@ p {
 
 .search-handoff-button.focused:not(.disabled) {
   border: solid 1px #0060df;
-  box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
+  box-shadow:
+    0 0 0 1px #0060df,
+    0 0 0 4px rgba(0, 96, 223, 0.3);
 }
 
 .search-handoff-button.disabled {
@@ -326,7 +331,7 @@ p {
   background-position: left 0 top 50px;
   background-repeat: no-repeat;
   background-size: 32px;
-  letter-spacing: -.2px;
+  letter-spacing: -0.2px;
   padding: 50px 0;
   padding-inline-start: 44px;
 }
@@ -391,7 +396,7 @@ p {
     padding: 17px;
 
     @media not (prefers-contrast) {
-      box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
+      box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2);
       background: rgba(149, 43, 185, 0.5);
     }
   }
@@ -406,7 +411,7 @@ p {
 
     @media not (prefers-contrast) {
       background-color: #321c64;
-      box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
+      box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2);
     }
   }
 
@@ -501,22 +506,22 @@ p {
   margin: 8px 0;
   font-weight: 600;
   cursor: pointer;
-  background-color: rgb(0,221,255);
-  color: rgb(43,42,51);
+  background-color: rgb(0, 221, 255);
+  color: rgb(43, 42, 51);
 }
 
 .promo-cta .primary:focus-visible {
-  outline-color: rgb(0,221,255);
+  outline-color: rgb(0, 221, 255);
 }
 
 .promo-cta .primary:hover {
-  background-color: rgb(128,235,255) !important;
-  color: rgb(43,42,51) !important;
+  background-color: rgb(128, 235, 255) !important;
+  color: rgb(43, 42, 51) !important;
 }
 
 .promo-cta .primary:hover:active {
-  background-color: rgb(170,242,255) !important;
-  color: rgb(43,42,51) !important;
+  background-color: rgb(170, 242, 255) !important;
+  color: rgb(43, 42, 51) !important;
 }
 
 @media (prefers-contrast) {
@@ -616,7 +621,7 @@ p {
 
   @media not (prefers-contrast) {
     html.private {
-      background: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%);
+      background: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%);
     }
   }
 }
diff --git a/browser/themes/shared/search/searchbar.css b/browser/themes/shared/search/searchbar.css
index 31ac5d0e9be4..d05f1e001e78 100644
--- a/browser/themes/shared/search/searchbar.css
+++ b/browser/themes/shared/search/searchbar.css
@@ -27,7 +27,7 @@
 .search-panel-header > label {
   margin-top: 2px;
   margin-bottom: 1px;
-  opacity: .6;
+  opacity: 0.6;
 }
 
 /* Make the contrast stronger in dark mode */
@@ -150,7 +150,7 @@
   color: inherit;
 }
 
-.search-panel-tree[collapsed=true] + .searchbar-separator {
+.search-panel-tree[collapsed="true"] + .searchbar-separator {
   display: none;
 }
 
diff --git a/browser/themes/shared/setDesktopBackground.css b/browser/themes/shared/setDesktopBackground.css
index 768bc7c949eb..57e8b6ab5135 100644
--- a/browser/themes/shared/setDesktopBackground.css
+++ b/browser/themes/shared/setDesktopBackground.css
@@ -18,6 +18,6 @@ html|canvas#screen {
 html|p#preview-unavailable {
   margin: 12px 11px;
   text-align: center;
-  color: #9B2423;
+  color: #9b2423;
   font-weight: bold;
 }
diff --git a/browser/themes/shared/syncedtabs/sidebar.css b/browser/themes/shared/syncedtabs/sidebar.css
index b6af5f441eb9..7ef242c71562 100644
--- a/browser/themes/shared/syncedtabs/sidebar.css
+++ b/browser/themes/shared/syncedtabs/sidebar.css
@@ -111,23 +111,23 @@ body {
   fill: currentColor;
 }
 
-.item.client[clientType=phone] > .item-title-container > .item-icon-container {
+.item.client[clientType="phone"] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-phone.svg");
 }
 
-.item.client[clientType=tablet] > .item-title-container > .item-icon-container {
+.item.client[clientType="tablet"] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-tablet.svg");
 }
 
-.item.client[clientType=desktop] > .item-title-container > .item-icon-container {
+.item.client[clientType="desktop"] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-desktop.svg");
 }
 
-.item.client[clientType=tv] > .item-title-container > .item-icon-container {
+.item.client[clientType="tv"] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-tv.svg");
 }
 
-.item.client[clientType=vr] > .item-title-container > .item-icon-container {
+.item.client[clientType="vr"] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-vr.svg");
 }
 
@@ -171,7 +171,9 @@ body {
 .item[hidden] {
   opacity: 0;
   max-height: 0;
-  transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
+  transition:
+    opacity 150ms ease-in-out,
+    max-height 150ms ease-in-out 150ms;
 }
 
 .item.empty .item-title-container {
@@ -285,15 +287,7 @@ body {
 :root[lwt-sidebar] {
   background-color: var(--lwt-sidebar-background-color);
   color: var(--lwt-sidebar-text-color);
-  scrollbar-color:
-    light-dark(
-      rgba(204,204,204,.5),
-      rgba(249,249,250,.4)
-    )
-    light-dark(
-      rgba(230,230,235,.5),
-      rgba(20,20,25,.3)
-    );
+  scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3));
   color-scheme: light;
 }
 
@@ -302,7 +296,7 @@ body {
 }
 
 :root[lwt-sidebar] .item.selected > .item-title-container {
-  background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
+  background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1));
   color: inherit;
 }
 
@@ -314,7 +308,7 @@ body {
 /* Platform specific styling */
 @media (-moz-platform: macos) {
   :root {
-     /* let the -moz-appearance of the sidebar shine through */
+    /* let the -moz-appearance of the sidebar shine through */
     background-color: transparent;
   }
 
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
index eefc7c8ec4a5..9f94fc5b9b7e 100644
--- a/browser/themes/shared/tabbrowser/content-area.css
+++ b/browser/themes/shared/tabbrowser/content-area.css
@@ -7,11 +7,11 @@
 :root {
   /* --tabpanel-background-color matches $in-content-page-background in newtab
      (browser/extensions/newtab/content-src/styles/_variables.scss) */
-  --tabpanel-background-color: #F9F9FB;
+  --tabpanel-background-color: #f9f9fb;
   @media (-moz-content-prefers-color-scheme: dark) {
-    --tabpanel-background-color: #2B2A33;
+    --tabpanel-background-color: #2b2a33;
   }
-  &[privatebrowsingmode=temporary] {
+  &[privatebrowsingmode="temporary"] {
     /* Value for --in-content-page-background in aboutPrivateBrowsing.css.
        !important overrides the direct setting of this variable in
        ThemeVariableMap.sys.mjs when the user has a theme that defines
@@ -20,7 +20,7 @@
 
     /* stylelint-disable-next-line media-query-no-invalid */
     @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") {
-      --tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%) !important;
+      --tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important;
     }
   }
 }
@@ -137,7 +137,7 @@
     opacity: 0;
   }
 
-  browser[type=content] {
+  browser[type="content"] {
     color-scheme: env(-moz-content-preferred-color-scheme);
   }
 
@@ -172,26 +172,30 @@
     max-width: 50%;
   }
 
-  &[type=status] {
+  &[type="status"] {
     min-width: min(23em, 33%);
   }
 
-  &[type=overLink] {
-    transition: opacity 120ms ease-out, visibility 120ms;
+  &[type="overLink"] {
+    transition:
+      opacity 120ms ease-out,
+      visibility 120ms;
   }
 
-  &:is([type=overLink], [inactive][previoustype=overLink]) {
+  &:is([type="overLink"], [inactive][previoustype="overLink"]) {
     direction: ltr;
   }
 
   &[inactive],
-  :root[inDOMFullscreen] &:not([type=overLink]) {
+  :root[inDOMFullscreen] &:not([type="overLink"]) {
     transition: none;
     opacity: 0;
     visibility: hidden;
 
-    &[previoustype=overLink] {
-      transition: opacity 200ms ease-out, visibility 200ms;
+    &[previoustype="overLink"] {
+      transition:
+        opacity 200ms ease-out,
+        visibility 200ms;
     }
   }
 
@@ -212,17 +216,17 @@
   text-shadow: none;
 
   @media (not (prefers-contrast)) and (not (-moz-platform: linux)) {
-    background-color: light-dark(#f9f9fa, hsl(240,1%,20%));
-    border-color: light-dark(#ddd, hsl(240,1%,40%));
-    color: light-dark(#444, rgb(249,249,250));
+    background-color: light-dark(#f9f9fa, hsl(240, 1%, 20%));
+    border-color: light-dark(#ddd, hsl(240, 1%, 40%));
+    color: light-dark(#444, rgb(249, 249, 250));
   }
 
   #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr),
   #statuspanel[mirror] > &:-moz-locale-dir(rtl) {
     border-right-style: solid;
     /* disabled on Windows for triggering grayscale AA (bug 659213): */
-  	@media not (-moz-platform: windows) {
-      border-top-right-radius: .3em;
+    @media not (-moz-platform: windows) {
+      border-top-right-radius: 0.3em;
     }
     margin-right: 1em;
   }
@@ -231,8 +235,8 @@
   #statuspanel[mirror] > &:-moz-locale-dir(ltr) {
     border-left-style: solid;
     /* disabled on Windows for triggering grayscale AA (bug 659213): */
-  	@media not (-moz-platform: windows) {
-      border-top-left-radius: .3em;
+    @media not (-moz-platform: windows) {
+      border-top-left-radius: 0.3em;
     }
     margin-left: 1em;
   }
@@ -243,7 +247,7 @@
  */
 #selection-shortcut-action-panel {
   --panel-subview-body-padding: 0;
- }
+}
 
 #ai-action-button {
   --button-min-height: 34px;
@@ -252,7 +256,6 @@
   margin: 1px;
 }
 
-
 #ask-chat-shortcuts {
   max-width: 345px;
 }
@@ -267,7 +270,6 @@
   margin-top: var(--space-small);
 }
 
-
 /**
  * Dialogs
  */
@@ -359,7 +361,30 @@
     }
 
     @media (min-width: 800px) {
-      --box-inline-margin: min(calc(16px + (100% - 800px) / 4), 32px);
+      --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
+    }
+
+    @media (min-height: 350px) {
+      --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
+    }
+
+    @media (min-height: 550px) {
+      --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
+    }
+
+    &:not(.spotlightBox) {
+      max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested));
+      max-height: min(
+        max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)),
+        var(--box-max-height-margin),
+        var(--box-max-height-requested),
+        var(--box-max-height-remaining)
+      );
+    }
+
+    .dialogStack &.spotlightBox {
+      /* Tab modal: subtract the navigator toolbox height from the dialog height. */
+      height: calc(100vh - var(--box-top-px));
     }
   }
 
@@ -381,11 +406,7 @@
     /* Do not go below 3px (as otherwise the top of the dialog would be
      * adjacent to or clipped by the top of the window), or above the window
      * size. */
-    margin-top: clamp(
-      3px,
-      var(--chrome-offset, 20px) - 5px,
-      calc(100vh - var(--subdialog-inner-height) - 5px)
-    );
+    margin-top: clamp(3px, var(--chrome-offset, 20px) - 5px, calc(100vh - var(--subdialog-inner-height) - 5px));
   }
 }
 
diff --git a/browser/themes/shared/tabbrowser/ctrlTab.css b/browser/themes/shared/tabbrowser/ctrlTab.css
index 645467864db4..50045ec27abc 100644
--- a/browser/themes/shared/tabbrowser/ctrlTab.css
+++ b/browser/themes/shared/tabbrowser/ctrlTab.css
@@ -8,7 +8,7 @@
 
 #ctrlTab-panel {
   appearance: none;
-  --panel-background: hsla(0,0%,40%,.85);
+  --panel-background: hsla(0, 0%, 40%, 0.85);
   --panel-color: white;
   --panel-border-color: transparent;
   --panel-padding: 20px 10px 10px;
@@ -33,7 +33,9 @@
   /* remove the :-moz-focusring outline from button.css on Windows */
   outline: none !important;
   margin: 0;
-  text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%);
+  text-shadow:
+    0 0 1px hsl(0, 0%, 12%),
+    0 0 2px hsl(0, 0%, 12%);
   border: none;
   background-color: transparent;
 }
@@ -62,16 +64,16 @@
   margin-bottom: 2px;
   margin-inline-end: -6px;
   padding: 5px;
-  background-color: #F9F9FA;
+  background-color: #f9f9fa;
   border-radius: 6px;
-  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .ctrlTab-canvas {
   color-scheme: light;
   background-color: Canvas;
   color: CanvasText;
-  box-shadow: 1px 1px 2px hsl(0,0%,12%);
+  box-shadow: 1px 1px 2px hsl(0, 0%, 12%);
   margin-bottom: 8px;
 }
 
@@ -90,14 +92,14 @@
   background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat;
   -moz-context-properties: fill;
   fill: currentColor;
-  filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5));
+  filter: drop-shadow(0 0 2px hsla(0, 0%, 0%, 0.5));
 }
 
 .ctrlTab-preview-inner,
 #ctrlTab-showAll {
   padding: 8px;
   border: 2px solid transparent;
-  border-radius: .5em;
+  border-radius: 0.5em;
 }
 
 .ctrlTab-preview-inner {
@@ -105,13 +107,13 @@
 }
 
 #ctrlTab-showAll {
-  background-color: rgba(255,255,255,.2);
-  margin-top: .5em;
+  background-color: rgba(255, 255, 255, 0.2);
+  margin-top: 0.5em;
 }
 
 .ctrlTab-preview:focus > .ctrlTab-preview-inner,
 #ctrlTab-showAll:focus {
-  background-color: rgba(0,0,0,.75);
+  background-color: rgba(0, 0, 0, 0.75);
   text-shadow: none;
   border-color: #45a1ff;
 }
diff --git a/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css b/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css
index 1391580fed5b..25e157cceafa 100644
--- a/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css
+++ b/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css
@@ -8,7 +8,7 @@
 :root[inDOMFullscreen] #sidebar-main,
 :root[inDOMFullscreen] #sidebar-splitter,
 :root[inDOMFullscreen] #sidebar-launcher-splitter,
-:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]),
+:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar="true"]),
 :root[inFullscreen] .global-notificationbox {
   visibility: collapse;
 }
diff --git a/browser/themes/shared/tabbrowser/tab-hover-preview.css b/browser/themes/shared/tabbrowser/tab-hover-preview.css
index 90680fb5870b..6847f97b30a8 100644
--- a/browser/themes/shared/tabbrowser/tab-hover-preview.css
+++ b/browser/themes/shared/tabbrowser/tab-hover-preview.css
@@ -49,6 +49,10 @@
 }
 
 @keyframes tab-hover-preview-fadein {
-  from { opacity: 0; }
-  to { opacity: 100; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 100;
+  }
 }
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index fac29cb01b59..c68152e17103 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -8,10 +8,10 @@
   --tab-min-height: 36px;
   --tab-group-suggestions-loading-animation-color-1: color-mix(in srgb, currentColor 5%, transparent);
   --tab-group-suggestions-loading-animation-color-2: color-mix(in srgb, currentColor 35%, transparent);
-  &[uidensity=compact] {
+  &[uidensity="compact"] {
     --tab-min-height: 29px;
   }
-  &[uidensity=touch] {
+  &[uidensity="touch"] {
     --tab-min-height: 41px;
   }
   --tab-group-label-height: max(1.5em, var(--tab-min-height) - 14px);
@@ -33,7 +33,7 @@
   --tab-block-margin: 4px;
   --tab-icon-end-margin: 5.5px;
   --tab-label-line-height: 1.7;
-  --tab-loading-fill: #0A84FF;
+  --tab-loading-fill: #0a84ff;
   --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
   --tab-selected-textcolor: var(--toolbar-color);
   --tab-selected-bgcolor: var(--toolbar-bgcolor);
@@ -100,9 +100,9 @@
   --tab-group-color-red: var(--color-red-70);
   --tab-group-color-red-invert: var(--color-red-20);
   --tab-group-color-red-pale: var(--color-red-0);
-  --tab-group-color-gray: #5E6A77;
-  --tab-group-color-gray-invert: #99A6B4;
-  --tab-group-color-gray-pale: #F2F9FF;
+  --tab-group-color-gray: #5e6a77;
+  --tab-group-color-gray-invert: #99a6b4;
+  --tab-group-color-gray-pale: #f2f9ff;
 
   --tab-group-label-text-dark: var(--color-gray-100);
   /* 5px of padding-block are adding to .tabbrowser-tab */
@@ -171,7 +171,7 @@
   pointer-events: none;
 
   #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & {
-    transition: width .15s ease-out;
+    transition: width 0.15s ease-out;
   }
 }
 
@@ -198,8 +198,9 @@
   &:not([pinned]) {
     flex: 100 100;
     max-width: 225px;
-    transition: min-width 100ms ease-out,
-                max-width 100ms ease-out;
+    transition:
+      min-width 100ms ease-out,
+      max-width 100ms ease-out;
 
     #tabbrowser-tabs[orient="horizontal"] &[fadein] {
       min-width: var(--tab-min-width-pref, var(--tab-min-width));
@@ -244,7 +245,7 @@
     &:is([muted], [soundplaying], [activemedia-blocked]) {
       --tab-icon-end-margin: 2px;
 
-      #tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
+      #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
         min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
       }
     }
@@ -259,7 +260,7 @@
     min-width: 0;
   }
 
-  :root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] {
+  :root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] {
     padding: 0 10px;
   }
 
@@ -300,7 +301,7 @@
       background-position: center center;
       background-size: 100% auto;
       background-repeat: no-repeat;
-      animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
+      animation: tab-burst-animation 375ms cubic-bezier(0, 0, 0.58, 1);
       -moz-context-properties: fill;
       fill: var(--tab-loading-fill);
     }
@@ -432,13 +433,21 @@
 }
 
 @keyframes tab-throbber-animation {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-100%); }
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes tab-throbber-animation-rtl {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(100%); }
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) {
@@ -450,10 +459,14 @@
 }
 
 @keyframes tab-sharing-icon-pulse {
-  0%, 16.66%, 83.33%, 100% {
+  0%,
+  16.66%,
+  83.33%,
+  100% {
     opacity: 0;
   }
-  33.33%, 66.66% {
+  33.33%,
+  66.66% {
     opacity: 1;
   }
 }
@@ -560,7 +573,7 @@
   inset-inline-end: -7px;
   z-index: 1; /* Overlay tab title */
 
-  #tabbrowser-tabs[orient=vertical] & {
+  #tabbrowser-tabs[orient="vertical"] & {
     top: 7px;
   }
 
@@ -594,18 +607,16 @@
        * We also apply one extra color on top (--audio-overlay-extra-background)
        * for hover / active feedback.
        */
-       --audio-overlay-extra-background: transparent;
+      --audio-overlay-extra-background: transparent;
       background-color: var(--lwt-accent-color);
-      background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                        linear-gradient(var(--toolbox-bgcolor));
+      background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor));
       -moz-context-properties: fill;
       fill: var(--tab-selected-textcolor);
       color-scheme: var(--tab-selected-color-scheme);
       border-radius: var(--border-radius-circle);
 
       .browser-toolbox-background:-moz-window-inactive &:not([selected]) {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                          linear-gradient(var(--toolbox-bgcolor-inactive));
+        background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive));
       }
 
       &:hover {
@@ -617,15 +628,13 @@
       }
 
       &[selected] {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                          linear-gradient(var(--tab-selected-bgcolor)),
-                          linear-gradient(var(--toolbox-bgcolor));
+        background-image:
+          linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
       }
 
       .browser-toolbox-background:-moz-window-inactive &[selected] {
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                        linear-gradient(var(--tab-selected-bgcolor)),
-                        linear-gradient(var(--toolbox-bgcolor-inactive));
+        background-image:
+          linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
       }
     }
   }
@@ -670,18 +679,16 @@
          * We also apply one extra color on top (--audio-overlay-extra-background)
          * for hover / active feedback.
          */
-         --audio-overlay-extra-background: transparent;
+        --audio-overlay-extra-background: transparent;
         background-color: var(--lwt-accent-color);
-        background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                          linear-gradient(var(--toolbox-bgcolor));
+        background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor));
         -moz-context-properties: fill;
         fill: var(--tab-selected-textcolor);
         color-scheme: var(--tab-selected-color-scheme);
         border-radius: var(--border-radius-circle);
 
         .browser-toolbox-background:-moz-window-inactive &:not([selected]) {
-          background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                            linear-gradient(var(--toolbox-bgcolor-inactive));
+          background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive));
         }
 
         &:hover {
@@ -693,15 +700,14 @@
         }
 
         &[selected] {
-          background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                            linear-gradient(var(--tab-selected-bgcolor)),
-                            linear-gradient(var(--toolbox-bgcolor));
+          background-image:
+            linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
         }
 
         .browser-toolbox-background:-moz-window-inactive &[selected] {
-          background-image: linear-gradient(var(--audio-overlay-extra-background)),
-                          linear-gradient(var(--tab-selected-bgcolor)),
-                          linear-gradient(var(--toolbox-bgcolor-inactive));
+          background-image:
+            linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)),
+            linear-gradient(var(--toolbox-bgcolor-inactive));
         }
       }
     }
@@ -727,37 +733,37 @@
   --button-min-height-small: 24px;
   --button-border-radius: var(--border-radius-small);
 
-    /* stylelint-disable-next-line media-query-no-invalid */
-    @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
-      /* We need these rules to apply at all times when the sidebar.visibility
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
+    /* We need these rules to apply at all times when the sidebar.visibility
       pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
       has not been added to root. There are certain scenarios when that attribute is temporarily
       removed from root such as when toggling the sidebar to expand with the toolbar button. */
-      #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
-      :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
-        &:is([soundplaying], [muted], [activemedia-blocked]) {
-          display: block;
-        }
+    #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
+    :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
+      &:is([soundplaying], [muted], [activemedia-blocked]) {
+        display: block;
+      }
 
-        &[soundplaying]::part(button) {
-          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
-        }
+      &[soundplaying]::part(button) {
+        background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+      }
 
-        &[muted]::part(button) {
-          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
-        }
+      &[muted]::part(button) {
+        background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+      }
 
-        &[activemedia-blocked]::part(button) {
-          background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
-        }
+      &[activemedia-blocked]::part(button) {
+        background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
       }
     }
+  }
 }
 
 .tab-label-container {
   overflow: hidden;
 
-  #tabbrowser-tabs:not([secondarytext-unsupported], [orient=vertical]) & {
+  #tabbrowser-tabs:not([secondarytext-unsupported], [orient="vertical"]) & {
     height: 2.7em;
   }
 
@@ -766,13 +772,13 @@
   }
 
   &[textoverflow] {
-    &[labeldirection=ltr],
+    &[labeldirection="ltr"],
     &:not([labeldirection]):-moz-locale-dir(ltr) {
       direction: ltr;
       mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
     }
 
-    &[labeldirection=rtl],
+    &[labeldirection="rtl"],
     &:not([labeldirection]):-moz-locale-dir(rtl) {
       direction: rtl;
       mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
@@ -782,7 +788,7 @@
 
 .tab-label {
   margin-inline: 0;
-  line-height: var(--tab-label-line-height);  /* override 'normal' in case of fallback math fonts with huge metrics */
+  line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */
   white-space: nowrap;
 }
 
@@ -821,12 +827,12 @@
 }
 
 .tab-secondary-label {
-  font-size: .75em;
-  margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */
-  opacity: .8;
+  font-size: 0.75em;
+  margin: -0.3em 0 0.3em; /* adjust margins to compensate for line-height of .tab-label */
+  opacity: 0.8;
 
   #tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
-  :root[uidensity=compact] &,
+  :root[uidensity="compact"] &,
   &:not([pictureinpicture]) {
     display: none;
   }
@@ -868,7 +874,10 @@
   }
 
   #tabbrowser-tabs[movingtab-createGroup] & {
-    transition: background-color 50ms ease, color 50ms ease, outline-color 50ms ease;
+    transition:
+      background-color 50ms ease,
+      color 50ms ease,
+      outline-color 50ms ease;
 
     &[dragover-createGroup] {
       background-color: light-dark(var(--dragover-tab-group-color-pale), var(--dragover-tab-group-color));
@@ -928,7 +937,9 @@
   }
 }
 
-#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"]
+  > #tabbrowser-arrowscrollbox
+  > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
   margin-inline-start: 12px;
 }
 
@@ -982,13 +993,14 @@
     display: flex;
   }
 
+  /* prettier-ignore */
   #tabbrowser-tabs[movingtab]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) > .tab-stack > .tab-background > & {
     display: flex;
     background-color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-invert));
     border-radius: 1px;
   }
 
-  #tabbrowser-tabs:is([movingtab-createGroup],[movingtab-ungroup]) &:is([selected],[multiselected]) {
+  #tabbrowser-tabs:is([movingtab-createGroup], [movingtab-ungroup]) &:is([selected], [multiselected]) {
     display: none;
   }
 }
@@ -1014,7 +1026,7 @@ tab-group {
 
 #tabbrowser-tabs[orient="vertical"][expanded] {
   tab-group > :is(.tab-group-label-container, .tabbrowser-tab),
-  &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
+  &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) {
     margin-inline-start: var(--space-medium);
   }
 }
@@ -1187,13 +1199,13 @@ tab-group {
   }
 
   input[name="tab-group-color"] {
-     width: 0;
-     height: 0;
-     opacity: 0;
-     margin: 0;
-     position: absolute;
-     pointer-events: none;
-     top: -100px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    position: absolute;
+    pointer-events: none;
+    top: -100px;
   }
 
   .tab-group-editor-swatch {
@@ -1224,7 +1236,7 @@ tab-group {
   .tab-group-delete {
     padding-block: 0;
     > toolbarbutton {
-     justify-content: flex-start;
+      justify-content: flex-start;
     }
   }
 
@@ -1256,24 +1268,25 @@ tab-group {
     &:not([scrolledtostart])::part(overflow-start-indicator),
     &:not([scrolledtoend])::part(overflow-end-indicator) {
       width: 7px; /* The width is the sum of the inline margins */
+      /* prettier-ignore */
       background-image: radial-gradient(ellipse at bottom,
                                         rgba(0,0,0,0.1) 0%,
                                         rgba(0,0,0,0.1) 7.6%,
                                         rgba(0,0,0,0) 87.5%);
       background-repeat: no-repeat;
       background-position: -3px;
-      border-left: .5px solid rgba(255,255,255,.2);
+      border-left: 0.5px solid rgba(255, 255, 255, 0.2);
       pointer-events: none;
       position: relative;
-      border-bottom: .5px solid transparent;
+      border-bottom: 0.5px solid transparent;
     }
 
     &:not([scrolledtostart])::part(overflow-start-indicator) {
-      margin-inline: -.5px -6.5px;
+      margin-inline: -0.5px -6.5px;
     }
 
     &:not([scrolledtoend])::part(overflow-end-indicator) {
-      margin-inline: -6.5px -.5px;
+      margin-inline: -6.5px -0.5px;
     }
 
     &:-moz-locale-dir(rtl)::part(overflow-start-indicator),
@@ -1282,15 +1295,10 @@ tab-group {
     }
   }
 
-
   &[orient="vertical"] {
     &::part(overflow-start-indicator),
     &::part(overflow-end-indicator) {
-      background-image: linear-gradient(
-        to top,
-        transparent 0%,
-        light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05))
-      );
+      background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)));
       background-repeat: no-repeat;
       pointer-events: none;
 
@@ -1449,11 +1457,7 @@ tab-group {
 
   &:not([scrolledtostart])::part(overflow-start-indicator),
   &:not([scrolledtoend])::part(overflow-end-indicator) {
-    background-image: linear-gradient(
-      to top,
-      transparent 0%,
-      light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05))
-    );
+    background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)));
     background-repeat: no-repeat;
     pointer-events: none;
     position: relative;
@@ -1483,8 +1487,7 @@ tab-group {
   }
 
   :root:not([sidebar-expand-on-hover]) & {
-    --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 *
-      var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
+    --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
     /* stylelint-disable-next-line media-query-no-invalid */
     @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
       /* We need these rules to apply at all times when the sidebar.visibility
@@ -1492,10 +1495,7 @@ tab-group {
       has not been added to root. There are certain scenarios when that attribute is temporarily
       removed from root such as when toggling the sidebar to expand with the toolbar button. */
       &::part(items-wrapper) {
-        grid-template-columns: repeat(
-          auto-fit,
-          minmax(var(--tab-pinned-min-width-expanded), auto)
-        );
+        grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
         display: grid;
         grid-auto-rows: var(--tab-height-with-margin-padding);
       }
@@ -1632,9 +1632,8 @@ tab-group {
        */
       --close-button-extra-background: transparent;
       background-color: var(--lwt-accent-color);
-      background-image: linear-gradient(var(--close-button-extra-background)),
-                        linear-gradient(var(--tab-selected-bgcolor)),
-                        linear-gradient(var(--toolbox-bgcolor));
+      background-image:
+        linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
       color-scheme: var(--tab-selected-color-scheme);
       outline-color: var(--tab-selected-outline-color);
       box-shadow: var(--tab-selected-shadow);
@@ -1646,9 +1645,8 @@ tab-group {
       inset-inline-start: 2px;
 
       &:-moz-window-inactive {
-        background-image: linear-gradient(var(--close-button-extra-background)),
-                          linear-gradient(var(--tab-selected-bgcolor)),
-                          linear-gradient(var(--toolbox-bgcolor-inactive));
+        background-image:
+          linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
       }
 
       &:hover {
@@ -1728,10 +1726,7 @@ tab-group {
 }
 
 :root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem) ~ #tabbrowser-tabs,
-:root[privatebrowsingmode] :is(
-  toolbarbutton:not(#firefox-view-button),
-  toolbarpaletteitem:not(#wrapper-firefox-view-button)
-) ~ #tabbrowser-tabs {
+:root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) ~ #tabbrowser-tabs {
   border-inline-start: var(--tabstrip-inner-border);
   padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
   margin-inline-start: 2px;
@@ -2071,10 +2066,12 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
   animation: tab-group-loading-block-animation 3s infinite;
   outline-color: var(--tab-group-suggestions-loading-animation-color-1);
   border-color: var(--tab-group-suggestions-loading-animation-color-2);
-  background: linear-gradient(100deg,
-      color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%,
-        var(--tab-group-suggestions-loading-animation-color-1) 50%,
-        color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70%);
+  background: linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%,
+    var(--tab-group-suggestions-loading-animation-color-1) 50%,
+    color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70%
+  );
   background-size: 200% 100%;
   border-radius: var(--border-radius-small);
   height: 1.5em;
diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
index 44155838b9b2..12d154635914 100644
--- a/browser/themes/shared/toolbarbuttons.css
+++ b/browser/themes/shared/toolbarbuttons.css
@@ -38,13 +38,13 @@
 
   --bookmark-block-padding: 4px;
 
-  &[uidensity=compact] {
+  &[uidensity="compact"] {
     --toolbarbutton-outer-padding: 3px;
     --toolbarbutton-inner-padding: 6px;
     --bookmark-block-padding: 1px;
   }
 
-  &[uidensity=touch] {
+  &[uidensity="touch"] {
     --toolbarbutton-inner-padding: 9px;
     --bookmark-block-padding: 7px;
   }
@@ -216,7 +216,7 @@ toolbar .toolbaritem-combined-buttons {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1px 16px;
-    opacity: .2;
+    opacity: 0.2;
   }
 
   &:hover > separator {
@@ -225,7 +225,7 @@ toolbar .toolbaritem-combined-buttons {
 }
 
 toolbar[brighttext] .toolbaritem-combined-buttons > separator {
-  opacity: .3;
+  opacity: 0.3;
 }
 
 /* Toolbar button animations */
@@ -327,7 +327,7 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator {
   /* resume at 7/35 and animate across the next 14 frames */
   17.14% {
     animation-timing-function: steps(14);
-    transform: translateX(calc(0  * -20px));
+    transform: translateX(calc(0 * -20px));
   }
   /* pause on the last frame for the remainder of the duration */
   54.29% {
@@ -445,7 +445,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
   --toolbarbutton-inner-padding: 4px;
   --toolbarbutton-outer-padding: 2px;
 
-  :root[uidensity=compact] & {
+  :root[uidensity="compact"] & {
     --toolbarbutton-outer-padding: 1px;
   }
 
@@ -492,7 +492,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
     outline-offset: var(--focus-outline-inset);
   }
 
-  :root[uidensity=compact] & {
+  :root[uidensity="compact"] & {
     margin-inline: 1px;
   }
 }
@@ -534,7 +534,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
 
 toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
-#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
+#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
   display: flex;
 }
 
@@ -587,7 +587,8 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
       transparent 3.75px,
       var(--toolbarseparator-color) 3.75px,
       var(--toolbarseparator-color) calc(100% - 3.75px),
-      transparent calc(100% - 3.75px) );
+      transparent calc(100% - 3.75px)
+    );
     border-image-slice: 1;
   }
 
@@ -606,14 +607,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
   #PersonalToolbar & {
     margin-top: -1px !important;
 
-    :root[uidensity=touch] & {
+    :root[uidensity="touch"] & {
       margin-top: -4px !important;
     }
   }
 
   /* Remove a pixel of margin on the end so that the badge doesn't
    * overflow the toolbar and push the button into the overflow menu. */
-  :root[uidensity=compact] & {
+  :root[uidensity="compact"] & {
     margin-inline-end: -7px !important;
   }
 
@@ -634,7 +635,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 
 /* Flexible spacer sizing */
 
-toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
+toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"],
 toolbarspring {
   flex: 1;
   min-width: 28px;
@@ -655,7 +656,7 @@ toolbarspring {
 
 /* Keyboard navigation */
 
-toolbar[keyNav]:not([collapsed=true], [customizing]) toolbartabstop,
+toolbar[keyNav]:not([collapsed="true"], [customizing]) toolbartabstop,
 #tabbrowser-tabs[orient="vertical"] #tabs-newtab-button,
 #vertical-tabs-newtab-button {
   -moz-user-focus: normal;
diff --git a/browser/themes/shared/webRTC-indicator.css b/browser/themes/shared/webRTC-indicator.css
index e0ffb5a11515..1ce7f89db8aa 100644
--- a/browser/themes/shared/webRTC-indicator.css
+++ b/browser/themes/shared/webRTC-indicator.css
@@ -11,23 +11,23 @@
   border: 0;
   border-radius: 5px;
   --indicator-height: 32px;
-  --indicator-background-color: rgb(249,249,250);
-  --indicator-color: rgb(12,12,13);
-  --indicator-border-color: hsla(0,0%,0%,.32);
+  --indicator-background-color: rgb(249, 249, 250);
+  --indicator-color: rgb(12, 12, 13);
+  --indicator-border-color: hsla(0, 0%, 0%, 0.32);
   --indicator-icon-fill-opacity: 0.8;
-  --indicator-item-separator: 1px solid hsla(210,4%,10%,.14);
-  --indicator-stop-button-background-color: rgb(0,96,223);
-  --indicator-stop-button-hover-background-color: rgb(0,62,170);
-  --indicator-stop-button-color: rgb(255,255,255);
-  --minimize-button-background-color: hsla(240,5%,5%,.1);
-  --minimize-button-hover-background-color: hsla(240,5%,5%,.15);
-  --minimize-button-active-background-color: hsla(240,5%,5%,.2);
-  --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4);
-  --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
-  --control-icon-checked-background-color: hsla(10,100%,50%,.16);
-  --control-icon-checked-icon-fill: rgb(215,0,34);
-  --control-icon-checked-hover-background-color: hsla(10,100%,50%,.24);
-  --control-icon-checked-active-background-color: hsla(10,100%,50%,.32);
+  --indicator-item-separator: 1px solid hsla(210, 4%, 10%, 0.14);
+  --indicator-stop-button-background-color: rgb(0, 96, 223);
+  --indicator-stop-button-hover-background-color: rgb(0, 62, 170);
+  --indicator-stop-button-color: rgb(255, 255, 255);
+  --minimize-button-background-color: hsla(240, 5%, 5%, 0.1);
+  --minimize-button-hover-background-color: hsla(240, 5%, 5%, 0.15);
+  --minimize-button-active-background-color: hsla(240, 5%, 5%, 0.2);
+  --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.4);
+  --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6);
+  --control-icon-checked-background-color: hsla(10, 100%, 50%, 0.16);
+  --control-icon-checked-icon-fill: rgb(215, 0, 34);
+  --control-icon-checked-hover-background-color: hsla(10, 100%, 50%, 0.24);
+  --control-icon-checked-active-background-color: hsla(10, 100%, 50%, 0.32);
   max-height: var(--indicator-height);
 }
 
@@ -37,15 +37,15 @@
     --indicator-color: rgb(249, 249, 250);
     --indicator-border-color: hsl(240, 1%, 40%);
     --indicator-item-separator: 1px solid rgb(249, 249, 250);
-    --minimize-button-background-color: rgba(249,249,250,0.1);
-    --minimize-button-hover-background-color: rgba(249,249,250,0.15);
-    --minimize-button-active-background-color: rgba(249,249,250,0.2);
-    --control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15);
-    --control-icon-unchecked-active-background-color: rgba(249,249,250,0.2);
-    --control-icon-checked-background-color: hsla(343,100%,58%,.16);
-    --control-icon-checked-icon-fill: rgb(255,40,102);
-    --control-icon-checked-hover-background-color: hsla(343,100%,58%,.24);
-    --control-icon-checked-active-background-color: hsla(343,100%,58%,.32);
+    --minimize-button-background-color: rgba(249, 249, 250, 0.1);
+    --minimize-button-hover-background-color: rgba(249, 249, 250, 0.15);
+    --minimize-button-active-background-color: rgba(249, 249, 250, 0.2);
+    --control-icon-unchecked-hover-background-color: rgba(249, 249, 250, 0.15);
+    --control-icon-unchecked-active-background-color: rgba(249, 249, 250, 0.2);
+    --control-icon-checked-background-color: hsla(343, 100%, 58%, 0.16);
+    --control-icon-checked-icon-fill: rgb(255, 40, 102);
+    --control-icon-checked-hover-background-color: hsla(343, 100%, 58%, 0.24);
+    --control-icon-checked-active-background-color: hsla(343, 100%, 58%, 0.32);
   }
 }
 
@@ -120,7 +120,7 @@ input[type="checkbox"] {
 :root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle,
 :root:not([sharingvideo],[sharingaudio]) > body > #device-share,
 :root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator {
-  display:none;
+  display: none;
 }
 
 xul|menu {
@@ -201,7 +201,7 @@ xul|menu {
 }
 
 .stop-button:hover {
-  background-color:  var(--indicator-stop-button-hover-background-color);
+  background-color: var(--indicator-stop-button-hover-background-color);
 }
 
 #window-controls {
@@ -312,18 +312,18 @@ xul|menu {
       --indicator-color: -moz-DialogText;
       --indicator-border-color: InactiveBorder;
       --indicator-item-separator: 1px solid ThreeDShadow;
-      --indicator-stop-button-background-color: hsla(0,0%,70%,.2);
-      --indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4);
+      --indicator-stop-button-background-color: hsla(0, 0%, 70%, 0.2);
+      --indicator-stop-button-hover-background-color: hsla(0, 0%, 70%, 0.4);
       --indicator-stop-button-color: inherit;
-      --minimize-button-background-color: hsla(0,0%,70%,.2);
-      --minimize-button-hover-background-color: hsla(0,0%,70%,.4);
-      --minimize-button-active-background-color: hsla(0,0%,70%,.6);
-      --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2);
-      --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
+      --minimize-button-background-color: hsla(0, 0%, 70%, 0.2);
+      --minimize-button-hover-background-color: hsla(0, 0%, 70%, 0.4);
+      --minimize-button-active-background-color: hsla(0, 0%, 70%, 0.6);
+      --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.2);
+      --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6);
       --control-icon-checked-background-color: SelectedItem;
       --control-icon-checked-icon-fill: SelectedItemText;
-      --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2);
-      --control-icon-checked-active-background-color: hsla(0,0%,70%,.6);
+      --control-icon-checked-hover-background-color: hsla(0, 0%, 70%, 0.2);
+      --control-icon-checked-active-background-color: hsla(0, 0%, 70%, 0.6);
     }
 
     #minimize,
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 007aec91e089..2c8bf4c3d9b0 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -15,7 +15,7 @@
   color: inherit;
 
   &[_moz-menuactive] {
-    background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
+    background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22));
     color: inherit;
 
     @media (prefers-contrast) {
@@ -31,7 +31,7 @@
     /* stylelint-disable-next-line media-query-no-invalid */
     @media -moz-pref("widget.windows.mica.toplevel-backdrop", 2) {
       /* For acrylic, do the same we do for popups to guarantee some contrast */
-      background-color: light-dark(rgba(255, 255, 255, .6), rgba(0, 0, 0, .6));
+      background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6));
     }
   }
 
@@ -57,7 +57,7 @@
 /* This is needed for Windows 10, see bug 1961257 */
 @media (-moz-windows-accent-color-in-titlebar) {
   :root[customtitlebar][sizemode="normal"] #navigator-toolbox {
-    border-top: .5px solid ActiveBorder;
+    border-top: 0.5px solid ActiveBorder;
     &:-moz-window-inactive {
       border-top-color: InactiveBorder;
     }
@@ -158,19 +158,19 @@
 
 @media not (prefers-contrast) {
   .titlebar-button:hover {
-    background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
+    background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22));
 
     &:active {
-      background-color: light-dark(hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
+      background-color: light-dark(hsla(0, 0%, 0%, 0.22), hsla(0, 0%, 100%, 0.32));
     }
   }
 
   .titlebar-close:hover {
     stroke: white;
-    background-color: hsl(355,86%,49%);
+    background-color: hsl(355, 86%, 49%);
 
     &:active {
-      background-color: hsl(355,82%,69%);
+      background-color: hsl(355, 82%, 69%);
     }
   }
 }
@@ -324,7 +324,7 @@
 @media (prefers-contrast) {
   /* For high contrast themes. XXX is this needed anymore? */
   #tabbrowser-tabpanels,
-  :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
+  :root[privatebrowsingmode="temporary"] #tabbrowser-tabpanels {
     background-color: -moz-default-background-color;
   }
 }
diff --git a/browser/themes/windows/downloads/allDownloadsView.css b/browser/themes/windows/downloads/allDownloadsView.css
index 6c71a5e01daf..5cd074f941bf 100644
--- a/browser/themes/windows/downloads/allDownloadsView.css
+++ b/browser/themes/windows/downloads/allDownloadsView.css
@@ -30,6 +30,7 @@
     color: inherit;
     background-color: transparent;
     /* four gradients for the bevel highlights on each edge, one for blue background */
+    /* prettier-ignore */
     background-image:
       linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
       linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
@@ -38,7 +39,7 @@
       linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
     background-clip: content-box;
     border-radius: 6px;
-    outline: 1px solid rgb(124,163,206);
+    outline: 1px solid rgb(124, 163, 206);
     outline-offset: -2px;
   }
 }
diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css
index e54d83986cb7..016c3403a767 100644
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@@ -35,25 +35,25 @@
 
 @media not (prefers-contrast) {
   :root {
-    --organizer-color: rgb(21,20,26);
-    --organizer-deemphasized-color: rgb(91,91,102);
+    --organizer-color: rgb(21, 20, 26);
+    --organizer-deemphasized-color: rgb(91, 91, 102);
 
-    --organizer-toolbar-background: rgb(249,249,251);
-    --organizer-pane-background: rgb(240,240,244);
+    --organizer-toolbar-background: rgb(249, 249, 251);
+    --organizer-pane-background: rgb(240, 240, 244);
     --organizer-content-background: white;
 
-    --organizer-hover-background: rgba(207,207,216,.66);
+    --organizer-hover-background: rgba(207, 207, 216, 0.66);
     --organizer-hover-color: var(--organizer-color);
-    --organizer-selected-background: rgb(207,207,216);
+    --organizer-selected-background: rgb(207, 207, 216);
     --organizer-selected-color: var(--organizer-color);
-    --organizer-focus-selected-background: rgb(0,97,224);
-    --organizer-focus-selected-color: rgb(251,251,254);
-    --organizer-outline-color: rgb(0,97,224);
+    --organizer-focus-selected-background: rgb(0, 97, 224);
+    --organizer-focus-selected-color: rgb(251, 251, 254);
+    --organizer-outline-color: rgb(0, 97, 224);
 
     --organizer-separator-color: var(--organizer-pane-field-border-color);
     --organizer-border-color: ThreeDLightShadow;
 
-    --organizer-toolbar-field-background: rgb(240,240,244);
+    --organizer-toolbar-field-background: rgb(240, 240, 244);
     --organizer-toolbar-field-background-focused: Field;
     --organizer-toolbar-field-border-color: transparent;
     --organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent);
@@ -63,22 +63,22 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --organizer-color: rgb(251,251,254);
-      --organizer-deemphasized-color: rgb(191,191,201);
+      --organizer-color: rgb(251, 251, 254);
+      --organizer-deemphasized-color: rgb(191, 191, 201);
 
-      --organizer-toolbar-background: rgb(43,42,51);
-      --organizer-pane-background: rgb(35,34,43);
-      --organizer-content-background: rgb(28,27,34);
+      --organizer-toolbar-background: rgb(43, 42, 51);
+      --organizer-pane-background: rgb(35, 34, 43);
+      --organizer-content-background: rgb(28, 27, 34);
 
-      --organizer-hover-background: rgb(82,82,94);
-      --organizer-selected-background: rgb(91,91,102);
-      --organizer-focus-selected-background: color-mix(in srgb, rgb(0,221,255) 80%, currentColor);
-      --organizer-focus-selected-color: rgb(43,42,51);
-      --organizer-outline-color: rgb(0,221,255);
+      --organizer-hover-background: rgb(82, 82, 94);
+      --organizer-selected-background: rgb(91, 91, 102);
+      --organizer-focus-selected-background: color-mix(in srgb, rgb(0, 221, 255) 80%, currentColor);
+      --organizer-focus-selected-color: rgb(43, 42, 51);
+      --organizer-outline-color: rgb(0, 221, 255);
 
-      --organizer-toolbar-field-background: rgb(28,27,34);
-      --organizer-toolbar-field-background-focused: rgb(66,65,77);
-      scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+      --organizer-toolbar-field-background: rgb(28, 27, 34);
+      --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
+      scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
     }
   }
 }
@@ -241,7 +241,7 @@
   /* Use box-shadow to draw a bottom border instead of border-bottom
    * because otherwise the items on contentView won't be perfectly
    * aligned with the items on the sidebar. */
-  box-shadow: inset 0 -1px var(--organizer-border-color)
+  box-shadow: inset 0 -1px var(--organizer-border-color);
 }
 
 tree {
diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css
index a0a4128e7069..f6c84c8fb67a 100644
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -19,6 +19,7 @@
 
 /* ::::: Alert icons :::::*/
 
+/* prettier-ignore */
 .message-icon {
   list-style-image: image-set(
     "moz-icon://stock/dialog-information?size=48" 1x,
@@ -26,6 +27,7 @@
   );
 }
 
+/* prettier-ignore */
 .alert-dialog #infoIcon,
 .alert-icon {
   list-style-image: image-set(
@@ -34,6 +36,7 @@
   );
 }
 
+/* prettier-ignore */
 .error-icon {
   list-style-image: image-set(
     "moz-icon://stock/dialog-error?size=48" 1x,
@@ -41,6 +44,7 @@
   );
 }
 
+/* prettier-ignore */
 .question-icon {
   list-style-image: image-set(
     "moz-icon://stock/dialog-question?size=48" 1x,
diff --git a/toolkit/themes/linux/global/richlistbox.css b/toolkit/themes/linux/global/richlistbox.css
index 0621bc1b713f..c14636ebdb53 100644
--- a/toolkit/themes/linux/global/richlistbox.css
+++ b/toolkit/themes/linux/global/richlistbox.css
@@ -35,7 +35,7 @@ richlistbox.theme-listbox:focus > richlistitem[current="true"] {
 
 richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"],
 richlistbox.theme-listbox:focus > richlistitem[current="true"][selected="true"] {
-  outline-color: #F3D982; /* TODO: find a suitable system color */
+  outline-color: #f3d982; /* TODO: find a suitable system color */
 }
 
 richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] {
diff --git a/toolkit/themes/linux/global/tabbox.css b/toolkit/themes/linux/global/tabbox.css
index 310ee849478d..853bbb1e0ace 100644
--- a/toolkit/themes/linux/global/tabbox.css
+++ b/toolkit/themes/linux/global/tabbox.css
@@ -8,7 +8,6 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-
 /* ::::: tabs ::::: */
 
 tabs {
diff --git a/toolkit/themes/linux/mozapps/update/updates.css b/toolkit/themes/linux/mozapps/update/updates.css
index ed54fa398e30..d08db1a8e2fe 100644
--- a/toolkit/themes/linux/mozapps/update/updates.css
+++ b/toolkit/themes/linux/mozapps/update/updates.css
@@ -52,7 +52,7 @@
 
 /* Update History Window */
 update {
-  border-bottom: 1px dotted #C0C0C0;
+  border-bottom: 1px dotted #c0c0c0;
 }
 
 .update-name {
diff --git a/toolkit/themes/mobile/global/aboutMemory.css b/toolkit/themes/mobile/global/aboutMemory.css
index 10be66ffc70f..ec2deb9e2b2a 100644
--- a/toolkit/themes/mobile/global/aboutMemory.css
+++ b/toolkit/themes/mobile/global/aboutMemory.css
@@ -22,7 +22,11 @@ body {
 
 /* The comment at the top of aboutMemory.xhtml explains this font choice. */
 pre {
-  font-family: Fira Mono, DejaVu Sans Mono, Liberation Mono, monospace;
+  font-family:
+    Fira Mono,
+    DejaVu Sans Mono,
+    Liberation Mono,
+    monospace;
 }
 
 div.ancillary {
@@ -65,7 +69,7 @@ div.sidebarItem {
   border-radius: 10px;
   background: Field;
   color: FieldText;
-  user-select: none;  /* no need to include this when cutting+pasting */
+  user-select: none; /* no need to include this when cutting+pasting */
 }
 
 input.filterInput {
@@ -93,7 +97,8 @@ div.opsRow {
   display: inline-block;
 }
 
-div.opsRowLabel, div.sidebarLabel {
+div.opsRowLabel,
+div.sidebarLabel {
   display: block;
   margin-bottom: 0.2em;
   font-weight: bold;
@@ -115,10 +120,12 @@ h1 {
 }
 
 h2 {
-  padding-left: .1em;
+  padding-left: 0.1em;
 }
 
-.accuracyWarning, .badInputWarning, .invalid {
+.accuracyWarning,
+.badInputWarning,
+.invalid {
   /*
    * Technically this should be used with the default background colour,
    * instead we're using the default field background colour,
@@ -145,17 +152,17 @@ h2 {
 }
 
 .noselect {
-  user-select: none;  /* no need to include this when cutting+pasting */
+  user-select: none; /* no need to include this when cutting+pasting */
 }
 
 .option {
   font-size: 80%;
-  user-select: none;  /* no need to include this when cutting+pasting */
+  user-select: none; /* no need to include this when cutting+pasting */
 }
 
 .legend {
   font-size: 80%;
-  user-select: none;  /* no need to include this when cutting+pasting */
+  user-select: none; /* no need to include this when cutting+pasting */
 }
 
 .debug {
diff --git a/toolkit/themes/mobile/global/aboutNetworking.css b/toolkit/themes/mobile/global/aboutNetworking.css
index a6252c434fd0..caf9458d0088 100644
--- a/toolkit/themes/mobile/global/aboutNetworking.css
+++ b/toolkit/themes/mobile/global/aboutNetworking.css
@@ -65,7 +65,9 @@
   width: 100%;
 }
 
-th, td, table {
+th,
+td,
+table {
   border-collapse: collapse;
   border: none;
   text-align: start;
diff --git a/toolkit/themes/mobile/global/aboutSupport.css b/toolkit/themes/mobile/global/aboutSupport.css
index 903e22073305..c000b8846110 100644
--- a/toolkit/themes/mobile/global/aboutSupport.css
+++ b/toolkit/themes/mobile/global/aboutSupport.css
@@ -42,7 +42,8 @@ table {
   border-spacing: 0;
 }
 
-th, td {
+th,
+td {
   border: 1px dotted ThreeDShadow;
   padding: 3px;
 }
diff --git a/toolkit/themes/osx/global/autocomplete.css b/toolkit/themes/osx/global/autocomplete.css
index 32fa35303fa3..d8ef02096cd1 100644
--- a/toolkit/themes/osx/global/autocomplete.css
+++ b/toolkit/themes/osx/global/autocomplete.css
@@ -82,5 +82,5 @@ panel[type="autocomplete-richlistbox"] {
 /* On Mac, the autocomplete panel changes color in system dark mode. We need
    to change the contrast on warning-background-color accordingly. */
 #PopupAutoComplete > richlistbox > richlistitem {
-  --status-background-color: light-dark(rgba(248,232,28,.2), rgba(248,232,28,.6)) !important;
+  --status-background-color: light-dark(rgba(248, 232, 28, 0.2), rgba(248, 232, 28, 0.6)) !important;
 }
diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css
index 00826c8366eb..d44da9572b17 100644
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -61,12 +61,12 @@ xul|separator.thin[orient="vertical"] {
 }
 
 xul|separator.groove:not([orient="vertical"]) {
-  border-top: 1px solid #A3A3A3;
+  border-top: 1px solid #a3a3a3;
   height: 0;
   margin-block: 0.4em;
 }
 xul|separator.groove[orient="vertical"] {
-  border-left: 1px solid #A3A3A3;
+  border-left: 1px solid #a3a3a3;
   width: 0;
   margin-inline: 0.4em;
 }
diff --git a/toolkit/themes/osx/global/tabbox.css b/toolkit/themes/osx/global/tabbox.css
index aff23fa58145..5e2a3ded3e69 100644
--- a/toolkit/themes/osx/global/tabbox.css
+++ b/toolkit/themes/osx/global/tabbox.css
@@ -51,7 +51,7 @@ tab:where(:last-of-type) {
 }
 
 tab:where([visuallyselected]:not(:-moz-window-inactive)) {
-  color: #FFF;
+  color: #fff;
 }
 
 .tab-middle {
@@ -59,6 +59,6 @@ tab:where([visuallyselected]:not(:-moz-window-inactive)) {
 }
 
 .tabs-left,
-.tabs-right  {
+.tabs-right {
   flex: 1;
 }
diff --git a/toolkit/themes/osx/mozapps/handling/handling.css b/toolkit/themes/osx/mozapps/handling/handling.css
index 1f18f18ba549..f56963239e8a 100644
--- a/toolkit/themes/osx/mozapps/handling/handling.css
+++ b/toolkit/themes/osx/mozapps/handling/handling.css
@@ -5,7 +5,7 @@
 richlistitem[type] {
   min-height: 36px; /* Don't forget to update the richlistbox height! */
   padding-inline-start: 2px;
- }
+}
 
 richlistitem {
   align-items: center;
diff --git a/toolkit/themes/osx/mozapps/update/updates.css b/toolkit/themes/osx/mozapps/update/updates.css
index 5b1e2632fdec..870ad49d3f7b 100644
--- a/toolkit/themes/osx/mozapps/update/updates.css
+++ b/toolkit/themes/osx/mozapps/update/updates.css
@@ -5,7 +5,8 @@
 /* Elevation Dialog */
 /* Specify the size for the UI so it has a fixed size. 3rd
    party themes should typically specify the same values. */
-#elevationBox, .update-content {
+#elevationBox,
+.update-content {
   height: 360px;
   width: 700px;
 }
@@ -58,7 +59,7 @@
 
 /* Update History Window */
 update {
-  border-bottom: 1px dotted #C0C0C0;
+  border-bottom: 1px dotted #c0c0c0;
 }
 
 .update-name {
diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css
index 908e3cb57099..133cbd7015d1 100644
--- a/toolkit/themes/shared/aboutCache.css
+++ b/toolkit/themes/shared/aboutCache.css
@@ -14,7 +14,7 @@ table {
 
 #disk,
 #memory {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 th {
@@ -49,15 +49,15 @@ td {
 }
 
 #entries > tbody > tr:nth-child(odd) {
-  background-color: rgba(0, 0, 0, .03);
+  background-color: rgba(0, 0, 0, 0.03);
 }
 
 #entries > tbody > tr:nth-child(even) {
-  background-color: rgba(0, 0, 0, .06);
+  background-color: rgba(0, 0, 0, 0.06);
 }
 
 #entries > tbody > tr > td {
-  padding: .5em 0;
+  padding: 0.5em 0;
   text-align: center;
 }
 
diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css
index 32cc89bdae0d..a8870e5095bc 100644
--- a/toolkit/themes/shared/aboutNetError.css
+++ b/toolkit/themes/shared/aboutNetError.css
@@ -8,7 +8,7 @@ body {
   --warning-color: #ffa436;
 }
 
-@media (prefers-color-scheme: dark)  {
+@media (prefers-color-scheme: dark) {
   body {
     --warning-color: #ffbd4f;
   }
@@ -27,7 +27,7 @@ body.certerror {
 /* Normally, setting e.g. `display: flex` overrides the hidden attribute.
  * This allows for element hiding to be controlled entirely in HTML & JS. */
 [hidden] {
-    display: none !important;
+  display: none !important;
 }
 
 body.captiveportal .title {
diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css
index 79a473050b79..c9a8b5888054 100644
--- a/toolkit/themes/shared/aboutNetworking.css
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -42,7 +42,7 @@ body {
   pointer-events: none;
 }
 
-@media (max-width: 830px){
+@media (max-width: 830px) {
   #categories > .category {
     padding-inline-start: 5px;
     margin-inline-start: 0;
@@ -63,7 +63,9 @@ body {
   width: 100%;
 }
 
-th, td, table {
+th,
+td,
+table {
   border-collapse: collapse;
   border: none;
   text-align: start;
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
index aff6ec21be68..cef17d0cbed2 100644
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -69,8 +69,8 @@ body {
   --custom-theme-background: var(--color-white);
   --custom-theme-foreground: var(--color-gray-100);
   --custom-theme-unvisited-links: var(--color-blue-50);
-  --custom-theme-visited-links: #321C64;
-  --custom-theme-selection-highlight: #FFFFCC;
+  --custom-theme-visited-links: #321c64;
+  --custom-theme-selection-highlight: #ffffcc;
   /* light colours */
 }
 
@@ -128,11 +128,11 @@ body.dark {
 body.contrast {
   --main-background: #000000;
   --main-foreground: #fff;
-  --primary-color: #D6B4FD;
-  --link-color: #8080FF;
-  --link-color-hover: #D6B4FD;
-  --toolbar-border: #FFEE32;
-  --icon-fill: #FFEE32;
+  --primary-color: #d6b4fd;
+  --link-color: #8080ff;
+  --link-color-hover: #d6b4fd;
+  --toolbar-border: #ffee32;
+  --icon-fill: #ffee32;
 }
 
 body.custom {
@@ -207,7 +207,9 @@ body {
 }
 
 body.loaded {
-  transition: color 0.4s, background-color 0.4s;
+  transition:
+    color 0.4s,
+    background-color 0.4s;
 }
 
 *::selection {
@@ -567,7 +569,7 @@ button:disabled {
   color: var(--popup-button-foreground-hover);
 }
 
-.radiorow > input[type=radio]:focus-visible + label {
+.radiorow > input[type="radio"]:focus-visible + label {
   outline: 2px solid var(--primary-color);
   outline-offset: var(--focus-outline-offset);
   z-index: 1;
@@ -898,7 +900,7 @@ div[name="customtheme"] {
 
 .color-scheme-buttons {
   .auto-button:before {
-    background: linear-gradient(to right, var(--light-theme-background) 50%, var(--dark-theme-background) 50%);;
+    background: linear-gradient(to right, var(--light-theme-background) 50%, var(--dark-theme-background) 50%);
   }
 
   .light-button:before {
@@ -1093,7 +1095,7 @@ pre {
 }
 
 .moz-reader-content .caption,
-.moz-reader-content .wp-caption-text
+.moz-reader-content .wp-caption-text,
 .moz-reader-content figcaption {
   font-size: 0.9em;
   line-height: 1.48em;
@@ -1163,7 +1165,7 @@ table {
   border-width: 0;
   /* height: auto is implied from `.moz-reader-content *` rule. */
   width: 1em;
-  margin: 0 .07em;
+  margin: 0 0.07em;
   padding: 0;
 }
 
diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css
index b05f5613c5d7..8fd1dcb7c5d7 100644
--- a/toolkit/themes/shared/aboutSupport.css
+++ b/toolkit/themes/shared/aboutSupport.css
@@ -180,5 +180,5 @@ td.integer {
 }
 
 #sandbox-tbody tr > td.feature-unavailable > .user-namespaces-unavailabe-support-link {
-  margin: 0 5px
+  margin: 0 5px;
 }
diff --git a/toolkit/themes/shared/alert.css b/toolkit/themes/shared/alert.css
index e89f69aec639..6b1111de7d92 100644
--- a/toolkit/themes/shared/alert.css
+++ b/toolkit/themes/shared/alert.css
@@ -21,14 +21,14 @@
   #alertBox {
     margin: 10px;
     border-radius: 1px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.59);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.59);
   }
 
   @media (not (prefers-contrast)) and (prefers-color-scheme: light) {
     #alertBox {
-      border-color: rgba(107,107,107,.3);
-      background-color: rgba(255,255,255,.9);
-      color: rgba(0,0,0,.9);
+      border-color: rgba(107, 107, 107, 0.3);
+      background-color: rgba(255, 255, 255, 0.9);
+      color: rgba(0, 0, 0, 0.9);
     }
   }
 }
@@ -45,18 +45,18 @@
 }
 
 #alertBox[animate] {
-  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+  animation-timing-function: cubic-bezier(0.12, 1.23, 0.48, 1.09);
 }
 
 #alertBox[animate][clicked] {
-  animation-duration: .6s;
+  animation-duration: 0.6s;
   animation-name: alert-clicked-animation;
 }
 
 /* This is used if the close button is clicked
    before the animation has finished. */
 #alertBox[animate][closing] {
-  animation-duration: .6s;
+  animation-duration: 0.6s;
   animation-name: alert-closing-animation;
 }
 
@@ -196,12 +196,12 @@
 }
 
 #alertSettings:hover {
-  background-color: rgb(128,128,128);
+  background-color: rgb(128, 128, 128);
 }
 
 #alertSettings[open],
 #alertSettings:hover:active {
-  background-color: rgb(102,102,102);
+  background-color: rgb(102, 102, 102);
 }
 
 #alertSettings[focusedViaMouse]:-moz-focusring {
diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css
index 14c19a61b998..4de3026a4964 100644
--- a/toolkit/themes/shared/appPicker.css
+++ b/toolkit/themes/shared/appPicker.css
@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-
 #app-picker {
   min-width: 320px;
 }
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css
index 38c3d4bc7313..4b0b1d8e046c 100644
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -181,7 +181,7 @@ button.month-year {
 
 @media not (prefers-contrast) {
   button.month-year {
-    fill-opacity: .5;
+    fill-opacity: 0.5;
   }
 }
 
@@ -229,7 +229,7 @@ button.month-year.active {
 }
 
 .week-header > tr > th {
-  opacity: .5;
+  opacity: 0.5;
 }
 
 .days-view {
@@ -281,7 +281,7 @@ button.month-year.active {
 }
 
 .days-view > tr > td.outside {
-  opacity: .5;
+  opacity: 0.5;
 }
 
 .days-view > tr > td.out-of-range,
diff --git a/toolkit/themes/shared/dirListing/dirListing.css b/toolkit/themes/shared/dirListing/dirListing.css
index ebf756c23f42..20e85f2c7d83 100644
--- a/toolkit/themes/shared/dirListing/dirListing.css
+++ b/toolkit/themes/shared/dirListing/dirListing.css
@@ -23,7 +23,7 @@ body {
 
 h1 {
   font-size: 160%;
-  margin: 0 0 .6em;
+  margin: 0 0 0.6em;
   border-bottom: 1px solid ThreeDLightShadow;
   font-weight: normal;
 }
@@ -84,7 +84,7 @@ td:not(:first-child) {
 }
 
 .up {
-  padding: 0 .5em;
+  padding: 0 0.5em;
   margin-inline-start: 20px;
 }
 
diff --git a/toolkit/themes/shared/findbar.css b/toolkit/themes/shared/findbar.css
index 97fa6e739f1e..b1860a5e76ab 100644
--- a/toolkit/themes/shared/findbar.css
+++ b/toolkit/themes/shared/findbar.css
@@ -96,12 +96,12 @@ xul|findbar {
   }
 
   &[status="notfound"] {
-    background-color: rgba(226,40,80,.3);
+    background-color: rgba(226, 40, 80, 0.3);
     color: inherit;
   }
 
   &[flash="true"] {
-    background-color: rgba(255,233,0,.3);
+    background-color: rgba(255, 233, 0, 0.3);
     color: inherit;
   }
 }
@@ -123,11 +123,11 @@ xul|findbar {
   }
 
   &:not([disabled]):hover {
-    background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+    background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
   }
 
   &:not([disabled]):hover:active {
-    background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+    background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
   }
 
   &[disabled="true"] > .toolbarbutton-icon {
@@ -176,11 +176,11 @@ xul|findbar {
   transition: opacity 150ms ease-in-out;
 
   &:hover {
-    background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+    background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
     outline: none;
   }
 
   &:hover:active {
-    background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+    background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
   }
 }
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
index 1a8b8546f711..dd0a492ac55c 100644
--- a/toolkit/themes/shared/global-shared.css
+++ b/toolkit/themes/shared/global-shared.css
@@ -19,7 +19,7 @@
   --default-focusring-width: 2px;
   --default-focusring: var(--default-focusring-width) dotted;
 
-  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
+  --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
 
   --arrowpanel-background: Field;
   --arrowpanel-color: FieldText;
@@ -75,7 +75,7 @@
    */
   @media not (prefers-contrast) {
     --toolbar-field-border-color: transparent;
-    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
+    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
     --toolbar-field-color: inherit;
 
     @media (prefers-color-scheme: light) {
@@ -84,7 +84,7 @@
   }
 
   &[lwtheme] {
-    --toolbar-bgcolor: rgba(255,255,255,.4);
+    --toolbar-bgcolor: rgba(255, 255, 255, 0.4);
     --toolbar-color: var(--lwt-text-color, inherit);
 
     --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
@@ -138,7 +138,7 @@
   }
 }
 
-:is(menupopup, panel):where([type=arrow]) {
+:is(menupopup, panel):where([type="arrow"]) {
   --panel-background: var(--arrowpanel-background);
   --panel-color: var(--arrowpanel-color);
   --panel-border-color: var(--arrowpanel-border-color);
@@ -201,7 +201,7 @@ html|textarea {
   font: inherit;
 }
 
-html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
+html|input:where(:not([type="radio" i], [type="checkbox" i], [type="range" i])),
 html|textarea {
   appearance: none;
   padding: var(--space-small);
@@ -328,7 +328,6 @@ a,
   }
 }
 
-
 /* Override properties set on buttons, to display the links without unwanted styling */
 button.text-link {
   appearance: none;
@@ -341,7 +340,7 @@ button.text-link {
 }
 
 button.text-link .button-text {
- /* Cancel out the default internal margin */
+  /* Cancel out the default internal margin */
   margin: 0;
 }
 
@@ -363,7 +362,7 @@ button.text-link .button-text {
   border-radius: var(--border-radius-small);
   color: var(--button-text-color);
   background-color: var(--button-background-color);
-  padding: .45em 1em;
+  padding: 0.45em 1em;
   min-height: var(--size-item-large);
   font-weight: 600;
   min-width: 0;
@@ -412,7 +411,7 @@ button.text-link .button-text {
     }
   }
 
-  &[type=menu] > .button-box > .button-menu-dropmarker {
+  &[type="menu"] > .button-box > .button-menu-dropmarker {
     appearance: none;
     display: flex;
     content: url("chrome://global/skin/icons/arrow-down-12.svg");
@@ -432,10 +431,10 @@ button.text-link .button-text {
   -moz-window-shadow: none;
 
   --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
-  --panel-border-color: rgba(0,0,0,.4);
+  --panel-border-color: rgba(0, 0, 0, 0.4);
   --panel-padding: 0;
-  --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
-  --panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
+  --panel-background: rgba(249, 249, 250, 0.8) no-repeat center var(--autoscroll-background-image);
+  --panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0, 0, 0, 0.2);
   --panel-shadow-margin: 4px;
   --panel-border-radius: 100%;
 
@@ -457,7 +456,6 @@ button.text-link .button-text {
   }
 }
 
-
 /* Combobox dropdown renderer */
 #ContentSelectDropdown > menupopup {
   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index 5717d70180de..7d029e28fb33 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -30,7 +30,7 @@
   --in-content-button-border-color: transparent;
   --in-content-button-border-color-hover: transparent;
   --in-content-button-border-color-active: var(--in-content-button-border-color-hover);
-  --in-content-primary-button-text-color: rgb(251,251,254);
+  --in-content-primary-button-text-color: rgb(251, 251, 254);
   --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
   --in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color);
   --in-content-primary-button-background: var(--button-background-color-primary);
@@ -97,20 +97,20 @@
      * just replace most of these for system colors and remove all this
      * duplication (assuming we honor the preferred color scheme for
      * in-content privileged pages and plain-text documents). */
-    --in-content-page-color: rgb(251,251,254);
+    --in-content-page-color: rgb(251, 251, 254);
 
-    --in-content-box-info-background: rgba(249,249,250,0.15);
+    --in-content-box-info-background: rgba(249, 249, 250, 0.15);
 
-    --in-content-border-color: rgba(249,249,250,0.2);
-    --in-content-border-invalid: rgb(255,132,139);
+    --in-content-border-color: rgba(249, 249, 250, 0.2);
+    --in-content-border-invalid: rgb(255, 132, 139);
 
-    --in-content-primary-button-text-color: rgb(43,42,51);
+    --in-content-primary-button-text-color: rgb(43, 42, 51);
 
     --in-content-table-background: rgb(35, 34, 43);
 
     --dialog-warning-text-color: var(--red-40);
 
-    scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+    scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
   }
 
   /* For dialogs, use a different background colour. We don't do
@@ -293,7 +293,7 @@ xul|menulist {
   border-radius: 4px;
   background-color: var(--in-content-button-background);
   font-weight: 400;
-  padding: .45em 1em;
+  padding: 0.45em 1em;
   text-decoration: none;
   margin: 4px 8px;
   /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
@@ -306,7 +306,7 @@ button {
 
 /* Small buttons get sized to 6/12px padding (when adding the 1px border) */
 button.small-button {
-  padding: .25em 1em;
+  padding: 0.25em 1em;
   font-size: var(--font-size-small);
   min-height: 28px;
 }
@@ -563,13 +563,13 @@ html|textarea {
   box-sizing: border-box;
   font-family: inherit;
   font-size: inherit;
-  padding: .45em;
+  padding: 0.45em;
   margin: 2px 4px;
   min-height: var(--input-text-min-height);
 }
 
 html|textarea {
-  min-height: auto
+  min-height: auto;
 }
 
 html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
@@ -940,8 +940,8 @@ xul|richlistitem[selected] xul|menulist:focus-visible {
     an existing forced colors border that uses the background color */
 @media (forced-colors) {
   xul|treechildren::-moz-tree-row(selected) {
-     border: 2px solid currentColor;
-     border-radius: 4px;
+    border: 2px solid currentColor;
+    border-radius: 4px;
   }
 }
 
@@ -999,7 +999,15 @@ xul|treecol:not([hideheader="true"], :first-child),
 .tree-columnpicker-button {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
+  border-image: linear-gradient(
+      transparent 0%,
+      transparent 20%,
+      var(--in-content-box-border-color) 20%,
+      var(--in-content-box-border-color) 80%,
+      transparent 80%,
+      transparent 100%
+    )
+    1 1;
 }
 
 @media (forced-colors) {
@@ -1098,7 +1106,9 @@ xul|treechildren::-moz-tree-image(selected) {
 
 input[type="text"][warning]:enabled:not(:focus) {
   border-color: var(--yellow-60);
-  box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30);
+  box-shadow:
+    0 0 0 1px var(--yellow-60),
+    0 0 0 4px var(--yellow-60-a30);
 }
 
 /* Cards */
@@ -1194,7 +1204,7 @@ xul|*.sidebar-footer-link {
 }
 
 .sidebar-footer-label {
-  font-size: .9em;
+  font-size: 0.9em;
   margin: 0 4px;
   user-select: none;
 }
diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css
index c4f57bdab3da..073ea042b663 100644
--- a/toolkit/themes/shared/in-content/info-pages.css
+++ b/toolkit/themes/shared/in-content/info-pages.css
@@ -69,14 +69,16 @@ body.wide-container {
   margin-bottom: 2em;
 }
 
-ul, ol {
+ul,
+ol {
   margin: 1em 0;
   padding: 0;
   margin-inline-start: 2em;
 }
 
-ul > li, ol > li {
-  margin-bottom: .5em;
+ul > li,
+ol > li {
+  margin-bottom: 0.5em;
 }
 
 ul {
@@ -139,7 +141,8 @@ table button {
   padding-inline: 3px;
 }
 
-th, td {
+th,
+td {
   padding: 4px;
   text-align: match-parent;
 }
diff --git a/toolkit/themes/shared/media/pipToggle.css b/toolkit/themes/shared/media/pipToggle.css
index 2a2ddeac58f9..bd09de68b935 100644
--- a/toolkit/themes/shared/media/pipToggle.css
+++ b/toolkit/themes/shared/media/pipToggle.css
@@ -212,7 +212,6 @@
   }
 }
 
-
 /* NO EXPERIMENT - PIP STYLING */
 
 .controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) {
@@ -260,7 +259,9 @@
 
 .pip-wrapper:not(.experiment) > .pip-expanded {
   border: var(--pip-highlight-width) var(--pip-highlight-style);
-  transition: opacity 250ms, scale 200ms;
+  transition:
+    opacity 250ms,
+    scale 200ms;
   height: var(--pip-expanded-height);
   background-color: rgba(12, 12, 13, 0.9);
   box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
@@ -286,8 +287,10 @@
 .pip-wrapper:not(.experiment) > .pip-expanded > .pip-explainer {
   padding: 6px 16px 8px 8px;
   translate: 0;
-  transition: opacity 250ms, translate 190ms;
-  transition-timing-function: cubic-bezier(.07, .95, 0, 1);
+  transition:
+    opacity 250ms,
+    translate 190ms;
+  transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
   background: rgba(12, 12, 13, 0.65);
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
@@ -313,14 +316,13 @@
   translate: 0 calc(40px - var(--pip-highlight-width));
 }
 
-
 /* EXPERIMENT ONLY - PIP STYLING */
 
 /* Since we change the outline for the first-time PiP toggle VARIANT,
  * override the focus outline in videocontrols.css as well so that
  * there is design consistency. */
 .controlsContainer.experiment {
-  --control-focus-outline: 2px solid #0060DF;
+  --control-focus-outline: 2px solid #0060df;
 }
 
 .pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label {
@@ -357,7 +359,11 @@
 }
 
 .pip-wrapper.experiment > .pip-expanded {
-  transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms;
+  transition:
+    opacity 250ms,
+    scale 200ms,
+    translate 190ms,
+    background-color 200ms;
   height: var(--pip-expanded-height);
   width: var(--pip-expanded-max-width);
   min-width: var(--pip-expanded-min-width);
diff --git a/toolkit/themes/shared/media/textrecognition.css b/toolkit/themes/shared/media/textrecognition.css
index b10bc213292c..88d88178931a 100644
--- a/toolkit/themes/shared/media/textrecognition.css
+++ b/toolkit/themes/shared/media/textrecognition.css
@@ -9,7 +9,7 @@
   overflow: clip;
 
   /* Prevent unwanted style inheritance. */
-  font: normal normal normal 100%/normal sans-serif;
+  font: normal normal normal 100% / normal sans-serif;
   text-align: left;
   white-space: normal;
 }
diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css
index 74b511f68bfa..5c64de7e9efc 100644
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -19,7 +19,7 @@
   /* Prevent unwanted style inheritance. See bug 554717. */
   text-align: left;
   list-style-image: none !important;
-  font: normal normal normal 100%/normal sans-serif !important;
+  font: normal normal normal 100% / normal sans-serif !important;
   text-decoration: none !important;
   white-space: normal !important;
 }
@@ -37,7 +37,7 @@
   --thumb-size: 13px;
   --label-font-size: 13px;
   --pip-toggle-padding: 5px;
-  --control-focus-outline: 2px solid #00DDFF;
+  --control-focus-outline: 2px solid #00ddff;
   --control-focus-outline-offset: -2px;
   --pip-toggle-icon-width-height: 16px;
   --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding));
@@ -123,7 +123,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: rgb(80,80,80, .85);
+  background-color: rgb(80, 80, 80, 0.85);
 }
 
 .controlsOverlay {
@@ -149,7 +149,7 @@
   overflow: hidden;
   height: 40px;
   padding: 0 9px;
-  background-color: rgba(26,26,26,.8);
+  background-color: rgba(26, 26, 26, 0.8);
 }
 
 .touch .controlBar {
@@ -253,7 +253,7 @@
   border-radius: 50%;
   /* this is a foreground element even though it is implemented as a background */
   background-color: currentColor;
-  filter: drop-shadow(0 0 2px rgba(0,0,0,0.65));
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
 }
 
 .volumeControl,
@@ -311,7 +311,7 @@
 }
 
 .bufferBar {
-  background-color: rgba(0,0,0,0.7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
 .bufferBar::-moz-progress-bar,
@@ -325,7 +325,7 @@
 }
 
 .bufferBar::-moz-progress-bar {
-  background-color: rgba(255,255,255,0.3);
+  background-color: rgba(255, 255, 255, 0.3);
   border-radius: calc(var(--track-size) / 2);
 }
 
@@ -360,7 +360,7 @@
 }
 
 .volumeControl::-moz-range-track {
-  background-color: rgba(0,0,0,0.7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
 @media (prefers-contrast) {
@@ -560,13 +560,13 @@
   direction: rtl;
 }
 
-[status="errorAborted"]         > #errorAborted,
-[status="errorNetwork"]         > #errorNetwork,
-[status="errorDecode"]          > #errorDecode,
+[status="errorAborted"] > #errorAborted,
+[status="errorNetwork"] > #errorNetwork,
+[status="errorDecode"] > #errorDecode,
 [status="errorSrcNotSupported"] > #errorSrcNotSupported,
-[status="errorNoSource"]        > #errorNoSource,
-[status="errorGeneric"]         > #errorGeneric,
-[status="pictureInPicture"]     > #pictureInPicture {
+[status="errorNoSource"] > #errorNoSource,
+[status="errorGeneric"] > #errorGeneric,
+[status="pictureInPicture"] > #pictureInPicture {
   display: inline;
 }
 
diff --git a/toolkit/themes/shared/menu.css b/toolkit/themes/shared/menu.css
index 014f1f9d8ff6..ff4843e7709a 100644
--- a/toolkit/themes/shared/menu.css
+++ b/toolkit/themes/shared/menu.css
@@ -13,7 +13,7 @@ panel {
   --menuitem-padding: 0.5em 1em;
 
   @media (-moz-platform: linux) {
-    --menuitem-padding: .25em .5em;
+    --menuitem-padding: 0.25em 0.5em;
   }
   @media (-moz-platform: macos) {
     --menuitem-padding: 3px 9px;
@@ -158,7 +158,7 @@ menubar > menu {
     color: inherit;
     background-color: transparent;
     border-radius: 0;
-    padding: .25em .5em;
+    padding: 0.25em 0.5em;
     padding-bottom: 1px;
     border-bottom: 3px solid transparent;
 
@@ -270,7 +270,7 @@ menupopup > menu::after {
 
   margin-inline: 1em 0;
   @media (-moz-platform: linux) {
-    margin-inline: .5em 0;
+    margin-inline: 0.5em 0;
   }
   @media (-moz-platform: macos) {
     margin-inline: 22px -3px;
@@ -331,7 +331,7 @@ menuitem[highlightable] > .menu-text {
 
   @media (-moz-platform: linux) {
     /* Matches inline menuitem padding */
-    margin-inline-end: .5em;
+    margin-inline-end: 0.5em;
   }
   @media (-moz-platform: windows) {
     margin-top: 2px;
@@ -393,7 +393,7 @@ menupopup[needsgutter] {
       padding-inline-start: 0;
 
       &::before {
-        content: '\2713'; /* a checkmark */
+        content: "\2713"; /* a checkmark */
         display: inline-block;
         vertical-align: middle;
         line-height: 0;
diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
index d57b756e7e6b..f99a6456bb68 100644
--- a/toolkit/themes/shared/narrate.css
+++ b/toolkit/themes/shared/narrate.css
@@ -42,7 +42,9 @@ body.hcm {
   transform: translate(-50%, calc(-50% - 2px));
   z-index: -1;
   border-bottom: 7px solid var(--narrate-word-highlight-color);
-  transition: left 0.1s ease, width 0.1s ease;
+  transition:
+    left 0.1s ease,
+    width 0.1s ease;
 }
 
 body.hcm .narrate-word-highlight {
@@ -176,7 +178,7 @@ body.hcm .narrate-word-highlight {
 /* Rate control */
 
 .narrate-rate-icon {
-  content: '';
+  content: "";
   width: 48px;
   height: 40px;
   background-position: center;
diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css
index 0386b48ddf45..6042f5a011a3 100644
--- a/toolkit/themes/shared/notification.css
+++ b/toolkit/themes/shared/notification.css
@@ -16,5 +16,7 @@
 }
 
 notification-message.animated {
-  transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
+  transition:
+    margin-top 300ms var(--animation-easing-function),
+    opacity 300ms var(--animation-easing-function);
 }
diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
index 59aac71e0fb8..4a4ab15f9801 100644
--- a/toolkit/themes/shared/pictureinpicture/player.css
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -53,7 +53,9 @@ body:fullscreen {
 
   .player-holder {
     will-change: opacity, filter;
-    transition: opacity 160ms linear, filter 160ms linear;
+    transition:
+      opacity 160ms linear,
+      filter 160ms linear;
 
     body:hover:not(:fullscreen) & {
       opacity: 0.35;
@@ -85,7 +87,7 @@ browser {
 #controls button:focus-visible,
 #controls input:focus-visible,
 .switch > input:focus-visible + .slider {
-  outline: 3px solid #0060DF;
+  outline: 3px solid #0060df;
   box-shadow: 1px 2px 5px #000;
 }
 
@@ -95,7 +97,10 @@ browser {
 #controls-bottom-gradient {
   background: linear-gradient(0deg, #000000 -13.24%, rgba(0, 0, 0, 0) 90.44%);
   position: absolute;
-  height: calc(var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) + var(--scrubber-vertical-margin));
+  height: calc(
+    var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) +
+      var(--scrubber-vertical-margin)
+  );
   bottom: 0;
   width: 100vw;
   margin: 0 calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin));
@@ -138,7 +143,9 @@ browser {
 
 .control-item {
   -moz-window-dragging: no-drag;
-  transition: opacity 160ms linear, fill-opacity 160ms linear;
+  transition:
+    opacity 160ms linear,
+    fill-opacity 160ms linear;
   opacity: 0;
   cursor: pointer;
 }
@@ -163,7 +170,7 @@ browser {
 }
 
 .control-button:hover:enabled {
-  background-color: rgba(255, 255, 255, .25);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 
 #controls:is([keying], [showing]) .control-button:disabled,
@@ -182,7 +189,7 @@ body:not(:fullscreen) #controls:hover .control-button:disabled {
   display: inline-block;
   width: max-content;
   position: relative;
-  padding: .4em .5em;
+  padding: 0.4em 0.5em;
   background: #000000;
   color: #ffffff;
   border-radius: 4px;
@@ -289,14 +296,14 @@ body:not(:fullscreen) #controls:hover #timestamp {
 
 #close,
 #unpip {
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
   position: absolute;
   fill: var(--close-btn-fill-color);
 }
 
 #close:is(:hover, :focus-visible),
 #unpip:is(:hover, :focus-visible) {
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
 #close {
@@ -339,7 +346,7 @@ body:not(:fullscreen) #controls:hover #timestamp {
 
   &::-moz-range-thumb {
     border-radius: 8px;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     width: 8px;
     height: 8px;
     padding: 0;
@@ -350,7 +357,7 @@ body:not(:fullscreen) #controls:hover #timestamp {
   }
 
   &::-moz-range-progress {
-    background-color: #FFFFFF;
+    background-color: #ffffff;
   }
 
   &,
@@ -410,7 +417,7 @@ body:not(:fullscreen) #fullscreen {
 
 .box {
   -moz-window-dragging: no-drag;
-  background-color: #2B2A33;
+  background-color: #2b2a33;
   text-align: start;
   font-size: 1em;
   width: 186px;
@@ -473,7 +480,7 @@ body:not(:fullscreen) #fullscreen {
 
 .arrow {
   border: 10px solid transparent;
-  border-top-color: #2B2A33;
+  border-top-color: #2b2a33;
   width: 0;
   height: 0;
   inset-inline-start: 136px;
@@ -483,7 +490,7 @@ body:not(:fullscreen) #fullscreen {
 .grey-line {
   width: 100%;
   height: 1px;
-  background: #8F8F9D;
+  background: #8f8f9d;
 }
 
 .font-size-selection {
@@ -549,12 +556,12 @@ body:not(:fullscreen) #fullscreen {
 
 .slider::before {
   position: absolute;
-  content: '';
+  content: "";
   height: 12px;
   width: 12px;
   inset-inline-start: 2px;
   bottom: 2px;
-  background-color: #2B2A33;
+  background-color: #2b2a33;
   transition: transform 250ms;
   border-radius: 50%;
 }
@@ -600,10 +607,10 @@ input:checked + .slider::before {
 
   &::-moz-range-thumb {
     border-radius: 14px;
-    background-color: #BFBFC9;
+    background-color: #bfbfc9;
     width: 8px;
     height: 8px;
-    border: 3px solid #FFFFFF;
+    border: 3px solid #ffffff;
     padding: 0;
   }
 
@@ -612,7 +619,7 @@ input:checked + .slider::before {
   }
 
   &::-moz-range-progress {
-    background-color: #FFFFFF;
+    background-color: #ffffff;
   }
 
   &,
@@ -625,7 +632,7 @@ input:checked + .slider::before {
 
 #timestamp {
   align-self: center;
-  color: #FFFFFF;
+  color: #ffffff;
   cursor: default;
   font-family: system-ui;
   font-size: 0.9em;
diff --git a/toolkit/themes/shared/pictureinpicture/texttracks.css b/toolkit/themes/shared/pictureinpicture/texttracks.css
index ec7af4a7b42a..be187ee9ba88 100644
--- a/toolkit/themes/shared/pictureinpicture/texttracks.css
+++ b/toolkit/themes/shared/pictureinpicture/texttracks.css
@@ -3,12 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
-    --min-font-size: 14px;
-    --max-font-size: 40px;
-    --font-scale: 0.06;
-    --texttracks-bottom: calc(var(--font-scale) * 100vh);
+  --min-font-size: 14px;
+  --max-font-size: 40px;
+  --font-scale: 0.06;
+  --texttracks-bottom: calc(var(--font-scale) * 100vh);
 
-    /*
+  /*
      * Move text tracks if they visually overlap with pip player controls
      * New text tracks position is determined by adding together:
      *  1) bottom distance of #controls
@@ -17,58 +17,64 @@
      *  4) hardcoded px value (to ensure consistent distance, regardless of pip window size)
      * NOTE: if changing player.css values, change values here too.
      */
-    --resize-margin: 5px;
-    --player-controls-height: calc(100vh - 2 * var(--resize-margin));
-    --player-controls-bottom-distance: calc(100vh - var(--player-controls-height));
-    --player-controls-button-height: 10vmax;
-    --player-controls-button-max-height: 32px;
-    --player-controls-button-min-height: 16px;
-    --player-controls-button-outline-width: 2px;
-    --player-controls-scrubber-height: 0px;
-    --player-bottom-controls-height: calc(var(--player-controls-scrubber-height) + clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height)));
-    --distance-from-player-controls: 20px;
-    --texttracks-bottom-overlapped: calc(var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) + var(--distance-from-player-controls));
+  --resize-margin: 5px;
+  --player-controls-height: calc(100vh - 2 * var(--resize-margin));
+  --player-controls-bottom-distance: calc(100vh - var(--player-controls-height));
+  --player-controls-button-height: 10vmax;
+  --player-controls-button-max-height: 32px;
+  --player-controls-button-min-height: 16px;
+  --player-controls-button-outline-width: 2px;
+  --player-controls-scrubber-height: 0px;
+  --player-bottom-controls-height: calc(
+    var(--player-controls-scrubber-height) +
+      clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height))
+  );
+  --distance-from-player-controls: 20px;
+  --texttracks-bottom-overlapped: calc(
+    var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) +
+      var(--distance-from-player-controls)
+  );
 }
 
 #texttracks {
-    background-color: black;
-    opacity: 80%;
-    position: absolute;
-    text-align: center;
-    box-sizing: border-box;
-    color: white;
-    margin: 0;
-    display: block;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 8px;
-    max-width: calc(0.88 * 100vw);
-    bottom: var(--texttracks-bottom);
-    font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size));
-    line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px);
-    white-space: pre-line;
-    width: max-content;
-    font-family: sans-serif;
-    transition: bottom 0.3s;
-    transition-delay: 0.1s;
+  background-color: black;
+  opacity: 80%;
+  position: absolute;
+  text-align: center;
+  box-sizing: border-box;
+  color: white;
+  margin: 0;
+  display: block;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px;
+  max-width: calc(0.88 * 100vw);
+  bottom: var(--texttracks-bottom);
+  font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size));
+  line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px);
+  white-space: pre-line;
+  width: max-content;
+  font-family: sans-serif;
+  transition: bottom 0.3s;
+  transition-delay: 0.1s;
 }
 
 #texttracks[overlap-video-controls] {
-    bottom: var(--texttracks-bottom-overlapped)
+  bottom: var(--texttracks-bottom-overlapped);
 }
 
 #texttracks:empty {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 @media (prefers-reduced-motion) {
-    #texttracks {
-        transition: none;
-    }
+  #texttracks {
+    transition: none;
+  }
 }
 
 @media screen and (max-width: 319px) {
-    #texttracks {
-        display: none;
-    }
+  #texttracks {
+    display: none;
+  }
 }
diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
index 96bd4b9966c4..9533f5e0fee5 100644
--- a/toolkit/themes/shared/popup.css
+++ b/toolkit/themes/shared/popup.css
@@ -23,7 +23,7 @@ panel {
   --panel-width: initial;
 
   --panel-shadow-margin: 4px;
-  --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
+  --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0, 0%, 0%, 0.2);
   -moz-window-input-region-margin: var(--panel-shadow-margin);
   margin: calc(-1 * var(--panel-shadow-margin));
 
@@ -81,7 +81,7 @@ panel {
     overflow: clip; /* Don't let panel content overflow the border */
   }
 
-  &[orient=vertical]::part(content) {
+  &[orient="vertical"]::part(content) {
     flex-direction: column;
   }
 }
@@ -134,7 +134,9 @@ panel[type="arrow"] {
    * other platforms.
    */
   @media (-moz-platform: macos) {
-    transition-property: -moz-window-transform, -moz-window-opacity;
+    transition-property:
+      -moz-window-transform,
+      -moz-window-opacity;
     @media not (prefers-reduced-motion) {
       -moz-window-transform: translateY(-70px);
 
diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css
index 4e25b8872469..60fd0da6192f 100644
--- a/toolkit/themes/shared/popupnotification.css
+++ b/toolkit/themes/shared/popupnotification.css
@@ -25,7 +25,7 @@ popupnotification {
 }
 
 popupnotificationcontent {
-  margin-top: .5em;
+  margin-top: 0.5em;
 }
 
 .popup-notification-header-container,
@@ -69,7 +69,7 @@ popupnotificationcontent {
 }
 
 .popup-notification-origin {
-  margin-bottom: .3em !important;
+  margin-bottom: 0.3em !important;
 
   &:not([value]) {
     display: none;
@@ -77,7 +77,7 @@ popupnotificationcontent {
 }
 
 .popup-notification-hint-text {
-  margin-top: .5em !important;
+  margin-top: 0.5em !important;
 
   &:empty {
     display: none;
diff --git a/toolkit/themes/shared/toolbarbutton.css b/toolkit/themes/shared/toolbarbutton.css
index a48c8344407d..6c8491a583ca 100644
--- a/toolkit/themes/shared/toolbarbutton.css
+++ b/toolkit/themes/shared/toolbarbutton.css
@@ -72,9 +72,10 @@ toolbarbutton {
   color: #fff;
   text-shadow: none;
   border-radius: 2px;
-  box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
-              0 -1px 0 hsla(0, 0%, 0%, .1) inset,
-              0 1px 0 hsla(206, 50%, 10%, .2);
+  box-shadow:
+    0 1px 0 hsla(0, 100%, 100%, 0.2) inset,
+    0 -1px 0 hsla(0, 0%, 0%, 0.1) inset,
+    0 1px 0 hsla(206, 50%, 10%, 0.2);
   margin: -5px 0 0 !important;
   margin-inline-end: -4px !important;
   min-width: 14px;
diff --git a/toolkit/themes/shared/tree/tree.css b/toolkit/themes/shared/tree/tree.css
index 54a53c36de93..620496d18831 100644
--- a/toolkit/themes/shared/tree/tree.css
+++ b/toolkit/themes/shared/tree/tree.css
@@ -37,7 +37,6 @@ tree {
   z-index: 2147483646;
 }
 
-
 /* ::::: tree rows ::::: */
 
 treechildren::-moz-tree-row {
@@ -56,7 +55,7 @@ treechildren::-moz-tree-row(multicol, odd) {
 
 @media not (prefers-contrast) {
   treechildren::-moz-tree-row(hover) {
-    background-color: hsla(0,0%,50%,.15);
+    background-color: hsla(0, 0%, 50%, 0.15);
   }
 }
 
@@ -75,7 +74,7 @@ treechildren::-moz-tree-row(current, focus) {
 }
 
 treechildren::-moz-tree-row(selected, current, focus) {
-  outline-color: #F3D982;
+  outline-color: #f3d982;
 }
 
 /* ::::: tree cells ::::: */
@@ -100,7 +99,6 @@ treechildren::-moz-tree-cell-text(selected, focus) {
   color: SelectedItemText;
 }
 
-
 /* ::::: lines connecting cells ::::: */
 
 treechildren::-moz-tree-line {
@@ -111,7 +109,6 @@ treechildren::-moz-tree-line(selected, focus) {
   border: 1px dotted SelectedItemText;
 }
 
-
 /* ::::: tree separator ::::: */
 
 treechildren::-moz-tree-separator {
@@ -119,7 +116,6 @@ treechildren::-moz-tree-separator {
   border-bottom: 1px solid ThreeDHighlight;
 }
 
-
 /* ::::: drop feedback ::::: */
 
 treechildren::-moz-tree-cell-text(primary, dropOn) {
@@ -279,11 +275,11 @@ html|input.tree-input {
 }
 
 @media (-moz-platform: macos) and (not (prefers-contrast)) {
-    /* We show a `SelectedItem` background on selected rows, so we do not need the
-       dotted outline in that case. For users who have Full Keyboard Access
-       enabled, macOS draws a blue highlight above the row highlight, so keyboard-
-       only users can still discern the currently-selected row when multiple rows
-       are selected. */
+  /* We show a `SelectedItem` background on selected rows, so we do not need the
+     dotted outline in that case. For users who have Full Keyboard Access
+     enabled, macOS draws a blue highlight above the row highlight, so keyboard-
+     only users can still discern the currently-selected row when multiple rows
+     are selected. */
   treechildren::-moz-tree-row(selected, current, focus) {
     outline: none;
   }
diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css
index 21a92c51ccb0..d151994cf84b 100644
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -106,11 +106,10 @@ xul|separator.groove[orient="vertical"] {
     > .menu-text {
       /* Padding should follow the 4/12 ratio, where 12px is the default font-size
          with 4px being the preferred padding size. */
-      padding-block: .3333em;
+      padding-block: 0.3333em;
     }
   }
 
-
   > menucaption > .menu-text {
     font-weight: bold;
   }
@@ -129,5 +128,5 @@ xul|separator.groove[orient="vertical"] {
 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-text {
   /* Touch padding should follow the 11/12 ratio, where 12px is the default
      font-size with 11px being the preferred padding size. */
-  padding-block: .9167em;
+  padding-block: 0.9167em;
 }
diff --git a/toolkit/themes/windows/global/richlistbox.css b/toolkit/themes/windows/global/richlistbox.css
index 316f00e9c342..4dbebd407f6b 100644
--- a/toolkit/themes/windows/global/richlistbox.css
+++ b/toolkit/themes/windows/global/richlistbox.css
@@ -34,7 +34,7 @@ richlistbox.theme-listbox:focus > richlistitem[current="true"] {
 
 richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"],
 richlistbox.theme-listbox:focus > richlistitem[current="true"][selected="true"] {
-  outline-color: #F3D982; /* TODO: find a suitable system color */
+  outline-color: #f3d982; /* TODO: find a suitable system color */
 }
 
 richlistbox.theme-listbox > richlistitem {
@@ -60,16 +60,16 @@ richlistbox.theme-listbox > richlistitem > label {
 
 @media not (prefers-contrast) {
   richlistbox.theme-listbox > richlistitem {
-    --listitem-selectedTextColor: rgb(0,0,0);
-    --listitem-selectedColor: rgb(217,217,217);
+    --listitem-selectedTextColor: rgb(0, 0, 0);
+    --listitem-selectedColor: rgb(217, 217, 217);
     --listitem-selectedBorder: var(--listitem-selectedColor);
-    --listitem-selectedBottomBorder: rgb(204,204,204);
+    --listitem-selectedBottomBorder: rgb(204, 204, 204);
     --listitem-selectedBackground: var(--listitem-selectedColor);
     --listitem-selectedImage: none;
-    --listitem-selectedCurrentBorder: rgb(123,195,255);
-    --listitem-selectedFocusColor: rgb(205,232,255);
+    --listitem-selectedCurrentBorder: rgb(123, 195, 255);
+    --listitem-selectedFocusColor: rgb(205, 232, 255);
     --listitem-selectedFocusBorder: var(--listitem-selectedFocusColor);
-    --listitem-selectedFocusBottomBorder: rgb(165,214,255);
+    --listitem-selectedFocusBottomBorder: rgb(165, 214, 255);
     --listitem-selectedFocusBackground: var(--listitem-selectedFocusColor);
     --listitem-selectedFocusImage: none;
     --listitem-selectedFocusCurrentBorder: var(--listitem-selectedFocusColor);
diff --git a/toolkit/themes/windows/mozapps/handling/handling.css b/toolkit/themes/windows/mozapps/handling/handling.css
index 1f18f18ba549..f56963239e8a 100644
--- a/toolkit/themes/windows/mozapps/handling/handling.css
+++ b/toolkit/themes/windows/mozapps/handling/handling.css
@@ -5,7 +5,7 @@
 richlistitem[type] {
   min-height: 36px; /* Don't forget to update the richlistbox height! */
   padding-inline-start: 2px;
- }
+}
 
 richlistitem {
   align-items: center;
diff --git a/toolkit/themes/windows/mozapps/update/updates.css b/toolkit/themes/windows/mozapps/update/updates.css
index d971beba90e4..af53bd3bd951 100644
--- a/toolkit/themes/windows/mozapps/update/updates.css
+++ b/toolkit/themes/windows/mozapps/update/updates.css
@@ -5,7 +5,8 @@
 /* Elevation Dialog */
 /* Specify the size for the UI so it has a fixed size. 3rd
    party themes should typically specify the same values. */
-#elevationBox, .update-content {
+#elevationBox,
+.update-content {
   height: 360px;
   width: 700px;
 }
@@ -52,7 +53,7 @@
 
 /* Update History Window */
 update {
-  border-bottom: 1px dotted #C0C0C0;
+  border-bottom: 1px dotted #c0c0c0;
 }
 
 .update-name {