Bug 1764815 - Stop using !important for .tabbrowser-tab to override tabbox.css. r=sfoster

Differential Revision: https://phabricator.services.mozilla.com/D143753

browser/themes/shared/tabs.css

@@ -91,9 +91,8 @@
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
-  margin: 0 !important /* override tabbox.css */;
-  padding: 0 !important /* override tabbox.css */;
-  padding-inline: 2px !important;
+  margin: 0;
+  padding: 0 2px;
   -moz-box-align: stretch;
   /* Needed so that overflowing content overflows towards the end rather than
      getting centered. That prevents tab opening animation from looking off at
@@ -545,10 +544,6 @@
   margin-block: var(--tab-block-margin);
 }
 
-:root[sizemode=maximized] .tabbrowser-tab {
-  margin-top: 0 !important;
-}
-
 /* Selected tab and tab hover */
 
 #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {

toolkit/themes/linux/global/tabbox.css

@@ -36,7 +36,7 @@ tab {
   color: -moz-DialogText;
 }
 
-tab[visuallyselected="true"] {
+tab:where([visuallyselected="true"]) {
   z-index: 1;
   margin-top: 0;
   margin-bottom: -2px;
@@ -44,7 +44,7 @@ tab[visuallyselected="true"] {
   padding-bottom: 6px;
 }
 
-tab + tab {
+tab:where(:not(:first-of-type)) {
   margin-inline-start: -2px;
 }
 

toolkit/themes/osx/global/tabbox.css

@@ -39,11 +39,11 @@ tab:-moz-focusring {
   position: relative;
 }
 
-tab:first-of-type {
+tab:where(:first-of-type) {
   padding-inline-start: 2px;
 }
 
-tab:last-of-type {
+tab:where(:last-of-type) {
   padding-inline-end: 2px;
 }
 

toolkit/themes/windows/global/tabbox.css

@@ -27,19 +27,19 @@ tab {
   color: -moz-DialogText;
 }
 
-.tab-text {
-  margin: 0 !important;
-}
-
-tab[visuallyselected="true"] {
+tab:where([visuallyselected="true"]) {
   margin-top: 0;
   padding: 1px 6px 4px;
 }
 
+tab:where(:first-of-type[visuallyselected="true"]) {
+  padding-inline: 5px;
+}
+
+.tab-text {
+  margin: 0 !important;
+}
+
 tab:-moz-focusring > .tab-middle {
   outline: var(--default-focusring);
 }
-
-tab:first-of-type[visuallyselected="true"] {
-  padding-inline: 5px;
-}