Fix: Pinned Tab - Color & separator #1111

css/leptonChrome.css

@@ -753,6 +753,27 @@
     }
   }
   @media (-moz-platform: windows) {
+    :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
+    :root[lwtheme-mozlightdark]
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
+    :root:is(
+        [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
+        [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
+      )
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
     :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
       #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox
@@ -1072,6 +1093,18 @@
     }
     /* Hard Coded */
     @media -moz-pref("userChrome.tab.color_like_toolbar") {
+      :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
+        #tabbrowser-tabs:not([movingtab])
+        > #pinned-tabs-container
+        > .tabbrowser-tab
+        > .tab-stack
+        > .tab-background[selected],
+      :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+        #tabbrowser-tabs:not([movingtab])
+        > #pinned-tabs-container
+        > .tabbrowser-tab
+        > .tab-stack
+        > .tab-background[selected],
       :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
         #tabbrowser-tabs:not([movingtab])
         > #tabbrowser-arrowscrollbox
@@ -4179,6 +4212,7 @@
       margin-inline-start: 0 !important;
     }
   }
+  :root:not([uidensity="touch"]) #pinned-tabs-container,
   :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
     --scrollbtn-inner-padding: 1px;
     --scrollbtn-outer-padding: 3px;
@@ -4237,6 +4271,9 @@
   }
   /* neighbouring tabs should "pinch" together */
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
+  #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
+    > #pinned-tabs-container
+    > #tabbrowser-arrowscrollbox-periphery,
   #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
     > #tabbrowser-arrowscrollbox
     > #tabbrowser-arrowscrollbox-periphery {
@@ -4374,6 +4411,16 @@
       ) !important; /* Prevent overflow pinned tab bottom margin */
     }
     @media not -moz-pref("userChrome.tabbar.multi_row") {
+      :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container,
+      #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+      #TabsToolbar:not([multibar])
+        #pinned-tabs-container[overflowing="true"]
+        > .tabbrowser-tab[pinned="true"]
+        .tab-stack,
+      #TabsToolbar:not([multibar])
+        #pinned-tabs-container[overflowing="true"]
+        > .tabbrowser-tab[pinned="true"]
+        .tab-content,
       :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
       #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
       #TabsToolbar:not([multibar])
@@ -4386,12 +4433,14 @@
         .tab-content {
         max-height: var(--tab-min-height) !important; /* Force apply height */
       }
+      :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container,
       :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
         height: var(--tab-min-height) !important;
       }
     }
   }
   /* Scroll Button - Size Fix */
+  :root #pinned-tabs-container,
   :root #tabbrowser-arrowscrollbox {
     --scrollbtn-vertical-padding: 3px;
     --scrollbtn-vertical-border: 2px;
@@ -6734,6 +6783,7 @@
     width: 100%;
   }
   /* Pinned */
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
     position: relative !important;
   }
@@ -6753,18 +6803,22 @@
   }
   /* Padding */
   @media not -moz-pref("userChrome.centered.tab") {
+    #pinned-tabs-container,
     #tabbrowser-arrowscrollbox {
       margin-inline: 2px !important;
     }
+    :root[sizemode="normal"] #pinned-tabs-container,
     :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
       margin-inline: 6px !important;
     }
   }
   @media -moz-pref("userChrome.centered.tab") {
     @media -moz-pref("userChrome.centered.tab.label") {
+      #pinned-tabs-container,
       #tabbrowser-arrowscrollbox {
         margin-inline: 2px !important;
       }
+      :root[sizemode="normal"] #pinned-tabs-container,
       :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
         margin-inline: 6px !important;
       }
@@ -6809,6 +6863,7 @@
     }
   }
   .scrollbox-clip[orient="horizontal"],
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     overflow: -moz-hidden-unscrollable;
     display: block;
@@ -6886,6 +6941,7 @@
     > #tabs-newtab-button {
     z-index: 2 !important;
   }
+  #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container,
   #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox {
     padding-inline-end: calc(
       16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2
@@ -6940,9 +6996,11 @@
     }
   }
   /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
     z-index: 0 !important;
   }
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack,
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack {
     /* Temporary solution for compatibility #513 */
     overflow-y: clip;
@@ -6977,6 +7035,26 @@
   .tab-background:is([selected], [multiselected]) {
     background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
   }
+  :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
   :root:is(:-moz-lwtheme, [lwtheme])
     #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -7010,6 +7088,30 @@
     background-repeat: repeat-x, repeat-x, no-repeat !important;
   }
   @media -moz-pref("userChrome.theme.transparent.frame") {
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #pinned-tabs-container
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+      > #pinned-tabs-container
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
     :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
       #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
@@ -7051,6 +7153,17 @@
   #vertical-tabs[brighttext] {
     --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
   }
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -7734,12 +7847,14 @@
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @media -moz-pref("userChrome.tab.dynamic_separator") {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     --start-tab-separator-position-x: -1.5px;
     --end-tab-separator-position-x: 1.5px;
     --tab-separator-position-x: -2.5px;
     --tab-separator-position-y: calc(-50% + 1px);
   }
+  #pinned-tabs-container:-moz-locale-dir(rtl),
   #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) {
     --start-tab-separator-position-x: 1.5px;
     --end-tab-separator-position-x: -1.5px;
@@ -7812,6 +7927,12 @@
       transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
     }
   }
+  #pinned-tabs-container:not([orient="vertical"]):not(:empty):not(
+      :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)
+    )
+    ~ #tabbrowser-arrowscrollbox:not([orient="vertical"])
+    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
+    .tab-stack::before,
   #tabbrowser-tabs:not([orient="vertical"])
     .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
     .tab-stack::before {
@@ -8284,6 +8405,10 @@
     --tab-label-mask-size: 25%;
   }
   .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
+  #tabbrowser-tabs:not([closebuttons="activetab"])
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
+    .tab-label-container,
   #tabbrowser-tabs:not([closebuttons="activetab"])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
@@ -8293,6 +8418,12 @@
 }
 /** Clipped tabs - Show close button at hover *********************************/
 @media -moz-pref("userChrome.tab.close_button_at_hover") {
+  #tabbrowser-tabs[closebuttons="activetab"]
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([pinned])
+    > .tab-stack
+    > .tab-content
+    > .tab-close-button:not([selected]),
   #tabbrowser-tabs[closebuttons="activetab"]
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([pinned])
@@ -14959,6 +15090,27 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-platform: windows) {
+  :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  :root[lwtheme-mozlightdark]
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  :root:is(
+      [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
+      [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
+    )
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
   :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
     #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
@@ -15290,6 +15442,18 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.theme.system_default") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") and (-moz-bool-pref: "userChrome.tab.color_like_toolbar") {
+  :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
   :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
     #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
@@ -18541,6 +18705,7 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.padding.tabbar_width") {
+  :root:not([uidensity="touch"]) #pinned-tabs-container,
   :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
     --scrollbtn-inner-padding: 1px;
     --scrollbtn-outer-padding: 3px;
@@ -18603,6 +18768,9 @@
 }
 @media (-moz-bool-pref: "userChrome.padding.tabbar_width") {
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
+  #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
+    > #pinned-tabs-container
+    > #tabbrowser-arrowscrollbox-periphery,
   #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
     > #tabbrowser-arrowscrollbox
     > #tabbrowser-arrowscrollbox-periphery {
@@ -18747,6 +18915,10 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.padding.tabbar_height") and (-moz-bool-pref: "userChrome.tab.connect_to_window") and (not (-moz-bool-pref: "userChrome.tabbar.multi_row")) {
+  :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container,
+  #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+  #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
+  #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content,
   :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
   #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
   #TabsToolbar:not([multibar])
@@ -18759,11 +18931,13 @@
     .tab-content {
     max-height: var(--tab-min-height) !important; /* Force apply height */
   }
+  :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container,
   :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
     height: var(--tab-min-height) !important;
   }
 }
 @media (-moz-bool-pref: "userChrome.padding.tabbar_height") {
+  :root #pinned-tabs-container,
   :root #tabbrowser-arrowscrollbox {
     --scrollbtn-vertical-padding: 3px;
     --scrollbtn-vertical-border: 2px;
@@ -21533,6 +21707,7 @@
     width: 100%;
   }
   /* Pinned */
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
     position: relative !important;
   }
@@ -21553,17 +21728,21 @@
   /* Padding */
 }
 @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (not (-moz-bool-pref: "userChrome.centered.tab")) {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     margin-inline: 2px !important;
   }
+  :root[sizemode="normal"] #pinned-tabs-container,
   :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
     margin-inline: 6px !important;
   }
 }
 @media (-moz-bool-pref: "userChrome.tabbar.as_titlebar") and (-moz-bool-pref: "userChrome.centered.tab") and (-moz-bool-pref: "userChrome.centered.tab.label") {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     margin-inline: 2px !important;
   }
+  :root[sizemode="normal"] #pinned-tabs-container,
   :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
     margin-inline: 6px !important;
   }
@@ -21606,6 +21785,7 @@
     }
   }
   .scrollbox-clip[orient="horizontal"],
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     overflow: -moz-hidden-unscrollable;
     display: block;
@@ -21683,6 +21863,7 @@
     > #tabs-newtab-button {
     z-index: 2 !important;
   }
+  #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container,
   #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox {
     padding-inline-end: calc(
       16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2
@@ -21740,9 +21921,11 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.connect_to_window") {
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
     z-index: 0 !important;
   }
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack,
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack {
     /* Temporary solution for compatibility #513 */
     overflow-y: clip;
@@ -21778,6 +21961,26 @@
   .tab-background:is([selected], [multiselected]) {
     background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
   }
+  :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
   :root:is(:-moz-lwtheme, [lwtheme])
     #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -21812,6 +22015,30 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.color_like_toolbar") and (-moz-bool-pref: "userChrome.theme.transparent.frame") {
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
   :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
     #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -21852,6 +22079,17 @@
   #vertical-tabs[brighttext] {
     --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
   }
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -22666,12 +22904,14 @@
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     --start-tab-separator-position-x: -1.5px;
     --end-tab-separator-position-x: 1.5px;
     --tab-separator-position-x: -2.5px;
     --tab-separator-position-y: calc(-50% + 1px);
   }
+  #pinned-tabs-container:-moz-locale-dir(rtl),
   #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) {
     --start-tab-separator-position-x: 1.5px;
     --end-tab-separator-position-x: -1.5px;
@@ -22754,6 +22994,12 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {
+  #pinned-tabs-container:not([orient="vertical"]):not(:empty):not(
+      :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)
+    )
+    ~ #tabbrowser-arrowscrollbox:not([orient="vertical"])
+    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
+    .tab-stack::before,
   #tabbrowser-tabs:not([orient="vertical"])
     .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
     .tab-stack::before {
@@ -23243,6 +23489,10 @@
     --tab-label-mask-size: 25%;
   }
   .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
+  #tabbrowser-tabs:not([closebuttons="activetab"])
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
+    .tab-label-container,
   #tabbrowser-tabs:not([closebuttons="activetab"])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
@@ -23252,6 +23502,12 @@
 }
 /** Clipped tabs - Show close button at hover *********************************/
 @media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") {
+  #tabbrowser-tabs[closebuttons="activetab"]
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([pinned])
+    > .tab-stack
+    > .tab-content
+    > .tab-close-button:not([selected]),
   #tabbrowser-tabs[closebuttons="activetab"]
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([pinned])

css/leptonChromeESR.css

@@ -456,6 +456,7 @@
       appearance: auto !important;
       -moz-default-appearance: -moz-window-titlebar !important;
     }
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container,
     :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
       color: -moz-dialogtext !important;
     }
@@ -975,6 +976,27 @@
     }
   }
   @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+    :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
+    :root[lwtheme-mozlightdark]
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
+    :root:is(
+        [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
+        [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
+      )
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[multiselected]:not([selected]),
     :root:is(:not([lwtheme]), :not(:-moz-lwtheme))
       #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox
@@ -1294,6 +1316,18 @@
     }
     /* Hard Coded */
     @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") {
+      :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
+        #tabbrowser-tabs:not([movingtab])
+        > #pinned-tabs-container
+        > .tabbrowser-tab
+        > .tab-stack
+        > .tab-background[selected],
+      :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+        #tabbrowser-tabs:not([movingtab])
+        > #pinned-tabs-container
+        > .tabbrowser-tab
+        > .tab-stack
+        > .tab-background[selected],
       :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
         #tabbrowser-tabs:not([movingtab])
         > #tabbrowser-arrowscrollbox
@@ -4502,6 +4536,7 @@
       margin-inline-start: 0 !important;
     }
   }
+  :root:not([uidensity="touch"]) #pinned-tabs-container,
   :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
     --scrollbtn-inner-padding: 1px;
     --scrollbtn-outer-padding: 3px;
@@ -4560,6 +4595,9 @@
   }
   /* neighbouring tabs should "pinch" together */
   :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
+  #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
+    > #pinned-tabs-container
+    > #tabbrowser-arrowscrollbox-periphery,
   #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
     > #tabbrowser-arrowscrollbox
     > #tabbrowser-arrowscrollbox-periphery {
@@ -4719,6 +4757,16 @@
       ) !important; /* Prevent overflow pinned tab bottom margin */
     }
     @supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
+      :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container,
+      #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+      #TabsToolbar:not([multibar])
+        #pinned-tabs-container[overflowing="true"]
+        > .tabbrowser-tab[pinned="true"]
+        .tab-stack,
+      #TabsToolbar:not([multibar])
+        #pinned-tabs-container[overflowing="true"]
+        > .tabbrowser-tab[pinned="true"]
+        .tab-content,
       :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
       #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
       #TabsToolbar:not([multibar])
@@ -4731,12 +4779,14 @@
         .tab-content {
         max-height: var(--tab-min-height) !important; /* Force apply height */
       }
+      :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container,
       :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
         height: var(--tab-min-height) !important;
       }
     }
   }
   /* Scroll Button - Size Fix */
+  :root #pinned-tabs-container,
   :root #tabbrowser-arrowscrollbox {
     --scrollbtn-vertical-padding: 3px;
     --scrollbtn-vertical-border: 2px;
@@ -7170,6 +7220,7 @@
     width: 100%;
   }
   /* Pinned */
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
     position: relative !important;
   }
@@ -7189,18 +7240,22 @@
   }
   /* Padding */
   @supports not -moz-bool-pref("userChrome.centered.tab") {
+    #pinned-tabs-container,
     #tabbrowser-arrowscrollbox {
       margin-inline: 2px !important;
     }
+    :root[sizemode="normal"] #pinned-tabs-container,
     :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
       margin-inline: 6px !important;
     }
   }
   @supports -moz-bool-pref("userChrome.centered.tab") {
     @supports -moz-bool-pref("userChrome.centered.tab.label") {
+      #pinned-tabs-container,
       #tabbrowser-arrowscrollbox {
         margin-inline: 2px !important;
       }
+      :root[sizemode="normal"] #pinned-tabs-container,
       :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
         margin-inline: 6px !important;
       }
@@ -7245,6 +7300,7 @@
     }
   }
   .scrollbox-clip[orient="horizontal"],
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     overflow: -moz-hidden-unscrollable;
     display: block;
@@ -7322,6 +7378,7 @@
     > #tabs-newtab-button {
     z-index: 2 !important;
   }
+  #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #pinned-tabs-container,
   #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox {
     padding-inline-end: calc(
       16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2
@@ -7376,9 +7433,11 @@
     }
   }
   /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned],
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
     z-index: 0 !important;
   }
+  #tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned] .tab-stack,
   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] .tab-stack {
     /* Temporary solution for compatibility #513 */
     overflow-y: clip;
@@ -7413,6 +7472,26 @@
   .tab-background:is([selected], [multiselected]) {
     background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
   }
+  :root:is(:-moz-lwtheme, [lwtheme]) #pinned-tabs-container > .tabbrowser-tab > .tab-stack > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
+  :root:is(:-moz-lwtheme, [lwtheme])
+    #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected],
   :root:is(:-moz-lwtheme, [lwtheme])
     #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -7446,6 +7525,30 @@
     background-repeat: repeat-x, repeat-x, no-repeat !important;
   }
   @supports -moz-bool-pref("userChrome.theme.transparent.frame") {
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #pinned-tabs-container
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
+      #tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+      > #pinned-tabs-container
+      > tab-group
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
     :root:not([lwtheme-image]):is(:-moz-lwtheme, [lwtheme])
       #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
@@ -7487,6 +7590,17 @@
   #vertical-tabs[brighttext] {
     --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
   }
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > tab-group
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab
@@ -8176,12 +8290,14 @@
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @supports -moz-bool-pref("userChrome.tab.dynamic_separator") {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     --start-tab-separator-position-x: -1.5px;
     --end-tab-separator-position-x: 1.5px;
     --tab-separator-position-x: -2.5px;
     --tab-separator-position-y: calc(-50% + 1px);
   }
+  #pinned-tabs-container:-moz-locale-dir(rtl),
   #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) {
     --start-tab-separator-position-x: 1.5px;
     --end-tab-separator-position-x: -1.5px;
@@ -8254,6 +8370,12 @@
       transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
     }
   }
+  #pinned-tabs-container:not([orient="vertical"]):not(:empty):not(
+      :has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)
+    )
+    ~ #tabbrowser-arrowscrollbox:not([orient="vertical"])
+    .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type
+    .tab-stack::before,
   #tabbrowser-tabs:not([orient="vertical"])
     .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type)
     .tab-stack::before {
@@ -8742,6 +8864,10 @@
     --tab-label-mask-size: 25%;
   }
   .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
+  #tabbrowser-tabs:not([closebuttons="activetab"])
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
+    .tab-label-container,
   #tabbrowser-tabs:not([closebuttons="activetab"])
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
@@ -8751,6 +8877,12 @@
 }
 /** Clipped tabs - Show close button at hover *********************************/
 @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") {
+  #tabbrowser-tabs[closebuttons="activetab"]
+    > #pinned-tabs-container
+    > .tabbrowser-tab:not([pinned])
+    > .tab-stack
+    > .tab-content
+    > .tab-close-button:not([selected]),
   #tabbrowser-tabs[closebuttons="activetab"]
     > #tabbrowser-arrowscrollbox
     > .tabbrowser-tab:not([pinned])

src/compatibility/_os.scss

@@ -248,6 +248,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
       -moz-default-appearance:-moz-window-titlebar !important;;
     }
 
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container,
     :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
       color: -moz-dialogtext !important;
     }

src/padding/_tabbar_height.scss

@@ -62,12 +62,17 @@
   }
 
   @include NotOption("userChrome.tabbar.multi_row") {
+    :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container,
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content,
     :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
       max-height: var(--tab-min-height) !important; /* Force apply height */
     }
+    :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container,
     :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
       height: var(--tab-min-height) !important;
     }
@@ -75,6 +80,7 @@
 }
 
 /* Scroll Button - Size Fix */
+:root #pinned-tabs-container,
 :root #tabbrowser-arrowscrollbox {
   --scrollbtn-vertical-padding: 3px;
   --scrollbtn-vertical-border: 2px;

src/padding/_tabbar_width.scss

@@ -60,6 +60,7 @@
   }
 }
 
+:root:not([uidensity="touch"]) #pinned-tabs-container,
 :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
   --scrollbtn-inner-padding: 1px;
   --scrollbtn-outer-padding: 3px;
@@ -107,6 +108,8 @@
 
 /* neighbouring tabs should "pinch" together */
 :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
+#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
+  > #pinned-tabs-container > #tabbrowser-arrowscrollbox-periphery,
 #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
   > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery {
   min-width: 3px; // With Panorama Tab Groups #643 #846

src/tab/_connect_to_window.scss

@@ -44,6 +44,7 @@
 }
 
 /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
+#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned],
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
   z-index: 0 !important;
 

src/tab/clipped_tab/_letters_cleary.scss

@@ -30,6 +30,7 @@
 }
 
 .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #pinned-tabs-container > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container,
 #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container {
   --tab-label-mask-size: 0.9em; /* Original: 1em */
 }

src/tab/clipped_tab/_show_close_button_at_hover.scss

@@ -19,6 +19,11 @@
 }
 
 #tabbrowser-tabs[closebuttons="activetab"] {
+  > #pinned-tabs-container
+  > .tabbrowser-tab:not([pinned])
+  > .tab-stack
+  > .tab-content
+  > .tab-close-button:not([selected]),
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab:not([pinned])
   > .tab-stack

src/tab/selected_tab/_color_like_toolbar.scss

@@ -7,6 +7,26 @@
   background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
 }
 
+#pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+  > #pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
 #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack

src/tab/selected_tab/_multi_selected.scss

@@ -7,6 +7,17 @@
   }
 }
 
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[multiselected]:not([selected]),
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[multiselected]:not([selected]),
 #tabbrowser-tabs:not([movingtab])
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab

src/tab/unselected_tab/_dynamic_separator.scss

@@ -23,6 +23,7 @@
 
 //------------------------------------------------------------------------------
 
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox {
   --start-tab-separator-position-x: -1.5px;
   --end-tab-separator-position-x: 1.5px;
@@ -69,6 +70,7 @@
   }
 }
 
+#pinned-tabs-container:not([orient="vertical"]):not(:empty):not(:has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)) ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before,
 #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before {
   opacity: var(--tab-separator-opacity);
 }

src/tabbar/_as_titlebar.scss

@@ -48,6 +48,7 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 }
 
 /* Pinned */
+#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"],
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
   position: relative !important;
 }
@@ -70,11 +71,12 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 
 /* Padding */
 @include _asTitlebar_preSpacer {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     margin-inline: 2px !important;
-  }
+    :root[sizemode="normal"] & {
-  :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
+      margin-inline: 6px !important;
-    margin-inline: 6px !important;
+    }
   }
 }
 

src/tabbar/_multi_row.scss

@@ -40,6 +40,7 @@ See the above repository for updates as well as full license text. */
 }
 
 .scrollbox-clip[orient="horizontal"],
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox {
   overflow: -moz-hidden-unscrollable;
   display: block;

src/tabbar/_unscroll.scss

@@ -46,6 +46,7 @@ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox {
       }
     }
 
+    #pinned-tabs-container,
     #tabbrowser-arrowscrollbox {
       padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important;
     }

src/theme/system_default_theme/_mac.scss

@@ -241,6 +241,18 @@
 
   /* Hard Coded */
   @include Option("userChrome.tab.color_like_toolbar") {
+    :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
     :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
       #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox

src/theme/system_default_theme/_win10.scss

@@ -342,6 +342,24 @@
     }
   }
 
+  :root#{$not_lwtheme}
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  :root[lwtheme-mozlightdark] /* Legacy */
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
+     #tabbrowser-tabs:not([movingtab])
+       > #pinned-tabs-container
+       > .tabbrowser-tab
+       > .tab-stack
+       > .tab-background[multiselected]:not([selected]),
   :root#{$not_lwtheme}
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox