tor-browser

tabs.css (85037B)

---

/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */

:root {
 --tabstrip-inner-border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
 --tabstrip-min-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
 --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"] {
   --tab-min-height: 29px;
 }
 &[uidensity="touch"] {
   --tab-min-height: 41px;
 }
 --tab-group-label-height: max(1.5em, var(--tab-min-height) - 14px);
 --tab-group-label-padding: 4px;
 --tab-group-label-highlight-thickness: 3px;
 --tab-group-label-animation-duration: 150ms;
 --tab-group-line-thickness: 2px;
 --tab-group-line-toolbar-border-distance: 1px;
 /* Collapsed tabs should be square, so set width to match the min height */
 --tab-collapsed-background-width: var(--tab-min-height);
 --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin));
 --tab-inner-inline-margin: var(--space-medium);
 --tab-inline-padding: 8px;
 --tab-pinned-expanded-background-width: 40px;
 --tab-pinned-margin-inline-expanded: var(--space-xsmall);
 --tab-pinned-min-width-expanded: calc(var(--tab-pinned-expanded-background-width) + 2 * var(--tab-pinned-margin-inline-expanded));
 --tab-pinned-container-margin-inline-expanded: var(--space-small);
 --tab-border-radius: var(--toolbarbutton-border-radius);
 --tab-overflow-clip-margin: 2px;
 --tab-close-button-padding: 6px;
 --tab-block-margin: 4px;
 --tab-icon-end-margin: 5.5px;
 --tab-label-line-height: 1.7;
 --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);
 --tab-selected-color-scheme: var(--toolbar-color-scheme);
 &[lwt-tab-selected="light"] {
   --tab-selected-color-scheme: light;
 }
 &[lwt-tab-selected="dark"] {
   --tab-selected-color-scheme: dark;
 }
 --tab-selected-shadow: var(--box-shadow-tab);
 --tab-outline: 1px solid var(--tab-outline-color);
 --tab-outline-color: transparent;
 --tab-outline-offset: -1px;
 --tab-selected-outline-color: transparent;
 --tab-hover-outline-color: transparent;
 @media (prefers-contrast) {
   --tab-selected-outline-color: currentColor;
   --tab-hover-outline-color: currentColor;
 }
 @media (forced-colors) {
   &:not([lwtheme]) {
     --tab-outline-color: ButtonText;
     --tab-hover-outline-color: SelectedItem;
     --tab-selected-outline-color: SelectedItem;
   }
 }
 &[lwtheme] {
   --tab-selected-outline-color: var(--lwt-tab-line-color, currentColor);
 }
 --tab-dragover-transition: transform 200ms var(--animation-easing-function);

 --vertical-tabs-scrollbar-color: auto;
 @media (-moz-platform: macos) {
   --vertical-tabs-scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
 }

 /* TAB GROUP COLORS
  * tab-group-color-* is used for expanded groups in light mode and collapsed groups in dark mode
  * tab-group-color-*-invert is used for expanded groups in dark mode
  * tab-group-color-*-pale is used for collapsed groups in light mode */
 --tab-group-color-blue: var(--color-blue-70);
 --tab-group-color-blue-invert: var(--color-blue-20);
 --tab-group-color-blue-pale: var(--color-blue-0);
 --tab-group-color-purple: var(--color-purple-70);
 --tab-group-color-purple-invert: var(--color-purple-20);
 --tab-group-color-purple-pale: var(--color-purple-0);
 --tab-group-color-cyan: var(--color-cyan-70);
 --tab-group-color-cyan-invert: var(--color-cyan-20);
 --tab-group-color-cyan-pale: var(--color-cyan-0);
 --tab-group-color-orange: var(--color-orange-70);
 --tab-group-color-orange-invert: var(--color-orange-20);
 --tab-group-color-orange-pale: var(--color-orange-0);
 --tab-group-color-yellow: var(--color-yellow-70);
 --tab-group-color-yellow-invert: var(--color-yellow-20);
 --tab-group-color-yellow-pale: var(--color-yellow-0);
 --tab-group-color-pink: var(--color-pink-70);
 --tab-group-color-pink-invert: var(--color-pink-20);
 --tab-group-color-pink-pale: var(--color-pink-0);
 --tab-group-color-green: var(--color-green-70);
 --tab-group-color-green-invert: var(--color-green-20);
 --tab-group-color-green-pale: var(--color-green-0);
 --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-label-text-dark: var(--color-gray-100);
 /* 5px of padding-block are adding to .tabbrowser-tab */
 --tab-height-with-margin-padding: calc(5px + var(--tab-min-height) + (2 * var(--tab-block-margin)));
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.verticalTabs") {
 :root {
   --tab-min-height: max(32px, calc(var(--tab-label-line-height) * 1em));
   --tab-block-margin: 2px;
   --tab-inline-padding: var(--space-medium);
 }
}

#tabbrowser-tabs {
 /* Overriding tabbox.css */
 border: 0;

 /* Use a bigger flex value than the searchbar to prevent it from
  * taking all the toolbar space. */
 flex: 1000 1000;

 &[orient="horizontal"] {
   min-height: var(--tabstrip-min-height);

   --tab-min-width: 76px;
   --tab-min-width-extra-icons: 0px;
   --tab-min-width-uidensity: 0px;
   --tab-max-width: 225px;

   /* Touch mode needs additional space for the close button. */
   :root[uidensity="touch"] & {
     --tab-min-width-uidensity: 10px;
   }

   /* Make it easier to drag tabs by expanding the drag area downwards. */
   &[movingtab] {
     padding-bottom: 15px;
     margin-bottom: -15px;
   }

   --tab-width-transition: min-width 100ms ease-out, max-width 100ms ease-out;
 }

 &[noshadowfortests] {
   --tab-selected-shadow: none;
 }

 &[orient="horizontal"] {
   --tab-group-label-highlight-radius: 2px;
 }

 &[orient="vertical"] {
   --tab-group-label-highlight-radius: 4px;
 }
}

#navigator-toolbox[movingtab] > #nav-bar {
 pointer-events: none;

 /* Allow dropping a tab on buttons with associated drop actions. */
 > #nav-bar-customization-target {
   > #personal-bookmarks,
   > #home-button,
   > #downloads-button,
   > #bookmarks-menu-button {
     pointer-events: auto;
   }
 }
}

.closing-tabs-spacer {
 pointer-events: none;

 #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & {
   transition: width 0.15s ease-out;
 }
}

#tabbrowser-arrowscrollbox-periphery {
 position: relative;
}

.tabbrowser-tab[dragtarget],
tab-split-view-wrapper[dragtarget] {
 /* Margin needs to be at least 4px to not clip multiselect stacking effect */
 overflow-clip-margin: 4px;
 z-index: 3 !important;
 position: absolute !important;
 pointer-events: none; /* avoid blocking dragover events on scroll buttons */

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("browser.tabs.dragDrop.multiselectStacking") {
   &[multiselected]:not([small-stack], [big-stack]) {
     visibility: hidden;
   }
 }
}

.tabbrowser-tab {
 --tab-label-mask-size: 1em;

 appearance: none;
 background-color: transparent;
 color: inherit;
 color-scheme: unset;
 border-radius: 0;
 border-width: 0;
 margin: 0;
 padding: 0 var(--tab-overflow-clip-margin);
 align-items: stretch;
 /* Needed so that overflowing content overflows towards the end rather than
    getting centered. That prevents tab opening animation from looking off at
    the start, see bug 1759221. */
 justify-content: flex-start;
 overflow: clip;
 /* Needed to avoid clipping the tab-background shadow, which has a 4px blur. */
 overflow-clip-margin: var(--tab-overflow-clip-margin);

 #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
   flex: 100 100;
   max-width: var(--tab-max-width);
   transition: var(--tab-width-transition);

   &:not([fadein]) {
     max-width: 0.1px;
     min-width: 0.1px;
     visibility: hidden;
   }

   &[fadein] {
     min-width: calc(var(--tab-min-width-pref, var(--tab-min-width)) + var(--tab-min-width-extra-icons) + var(--tab-min-width-uidensity));
     &:is([muted], [soundplaying], [activemedia-blocked]):not([tab-note]) {
       --tab-min-width-extra-icons: 24px;
     }
     &[tab-note]:not([muted], [soundplaying], [activemedia-blocked]) {
       --tab-min-width-extra-icons: 20px;
     }
     &[tab-note]:is([muted], [soundplaying], [activemedia-blocked]) {
       --tab-min-width-extra-icons: 44px;
     }
   }
 }

 #tabbrowser-tabs[movingtab] & {
   position: relative;

   @media (prefers-reduced-motion: no-preference) {
     :not(tab-group:active) > &[fadein]:not(:active, [multiselected]),
     &[multiselected-move-together],
     &[tabdrop-samewindow] {
       transition: var(--tab-dragover-transition);
     }
   }
 }

 &[multiselected-move-together][multiselected] {
   z-index: 3;

   &[visually-selected] {
     z-index: 4;
   }

   &:not([selected]) {
     z-index: 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
   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. */
   &:is([muted], [soundplaying], [activemedia-blocked]) {
     --tab-icon-end-margin: 2px;
   }
 }
}

.tab-content {
 position: relative;
 padding: 0 var(--tab-inline-padding);

 &:not([pinned]) {
   min-width: 0;
 }

 :root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] {
   padding: 0 10px;
 }

 &:is([selected], [multiselected]) {
   color: var(--tab-selected-textcolor);
   color-scheme: var(--tab-selected-color-scheme);
 }
}

@media (prefers-reduced-motion: no-preference) {
 .tab-loading-burst {
   border-radius: inherit;
   position: relative;
   overflow: hidden;

   &::before {
     position: absolute;
     content: "";
     /* We set the width to be a percentage of the tab's width so that we can use
        the `scale` transform to scale it up to the full size of the tab when the
        burst occurs. We also need to set the margin-inline-start so that the
        center of the burst matches the center of the favicon. */
     width: 5%;
     height: 100%;
     /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks
        to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */
     margin-inline-start: calc(17px - 2.5%);
   }

   &[pinned]::before {
     /* This is like the margin-inline-start rule above, except that icons for
        pinned tabs are 12px from the edge. */
     margin-inline-start: calc(20px - 2.5%);
   }

   &[bursting]::before {
     background-color: var(--tab-loading-fill);
     clip-path: circle(closest-side);
     animation: tab-burst-animation 375ms cubic-bezier(0, 0, 0.58, 1);
   }

   &[bursting][notselectedsinceload]::before {
     animation-name: tab-burst-animation-light;
   }
 }

 @keyframes tab-burst-animation {
   0% {
     opacity: 0.4;
     transform: scale(1);
   }
   100% {
     opacity: 0;
     transform: scale(40);
   }
 }

 @keyframes tab-burst-animation-light {
   0% {
     opacity: 0.2;
     transform: scale(1);
   }
   100% {
     opacity: 0;
     transform: scale(40);
   }
 }
}

.tab-icon-pending:not([fadein]),
.tab-icon-image:not([fadein]),
.tab-close-button:not([fadein]),
.tab-background:not([fadein]) {
 visibility: hidden;
}

.tab-label:not([fadein]),
.tab-throbber:not([fadein]) {
 display: none;
}

/* Width/height & margins apply on tab icon stack children */
.tab-throbber,
.tab-icon-pending,
.tab-icon-image,
.tab-sharing-icon-overlay,
.tab-icon-overlay {
 height: 16px;
 width: 16px;

 /* apply end margin to tabs which are:
    - oriented horizontally and not pinned
    - vertical but expanded and not pinned
    - expand on hover enabled, vertical but expanded
 */
 #tabbrowser-tabs[orient="horizontal"] &:not([pinned]),
 :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]) {
   margin-inline-end: var(--tab-icon-end-margin);
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("sidebar.visibility", "expand-on-hover") {
   /* We need these rules to apply at all times when the sidebar.visibility
   pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
   has 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="vertical"][expanded] & {
     margin-inline-end: var(--tab-icon-end-margin);
   }
 }
}

.tab-throbber {
 &:not([busy]) {
   display: none;
 }

 @media (prefers-reduced-motion: reduce) {
   background-image: url("chrome://global/skin/icons/loading.svg");
   background-position: center;
   background-repeat: no-repeat;
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.4;

   &[progress] {
     opacity: 0.8;
   }
 }

 @media (prefers-reduced-motion: no-preference) {
   :root[sessionrestored] & {
     &[busy] {
       position: relative;
       overflow: hidden;

       &::before {
         content: "";
         position: absolute;
         background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
         background-position: left center;
         background-repeat: no-repeat;
         width: 480px;
         height: 100%;
         animation: tab-throbber-animation 1.05s steps(30) infinite;
         -moz-context-properties: fill;
         fill: currentColor;
         opacity: 0.7;
       }

       &:-moz-locale-dir(rtl)::before {
         animation-name: tab-throbber-animation-rtl;
       }
     }

     &[progress]::before {
       fill: var(--tab-loading-fill);
       opacity: 1;
     }

     #TabsToolbar[brighttext] &[progress]:not([selected])::before {
       fill: #84c1ff;
     }
   }
 }
}

@keyframes tab-throbber-animation {
 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(-100%);
 }
}

@keyframes tab-throbber-animation-rtl {
 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(100%);
 }
}

.tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) {
 display: none;
}

:root {
 --tab-sharing-icon-animation: 3s linear tab-sharing-icon-pulse infinite;
}

@keyframes tab-sharing-icon-pulse {
 0%,
 16.66%,
 83.33%,
 100% {
   opacity: 0;
 }
 33.33%,
 66.66% {
   opacity: 1;
 }
}

.tab-icon-image {
 -moz-context-properties: fill, stroke;
 fill: currentColor;

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("browser.tabs.fadeOutUnloadedTabs") {
   &[pending] {
     filter: grayscale(100%);
     @media (prefers-color-scheme: dark) {
       filter: grayscale(100%) invert();
     }
     opacity: 0.5;
     /* Fade the favicon out */
     transition-property: filter, opacity;
     transition-duration: 1s;
   }
   &:not([pending]) {
     /* When loading the tab, just show the favicon without a transition.
       The favicon turns into the "loading" state anyway, so we don't want
       to interfere with that. */
     transition: none;
   }
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") {
   &[pending][discarded] {
     filter: grayscale(100%);
     @media (prefers-color-scheme: dark) {
       filter: grayscale(100%) invert();
     }
     opacity: 0.5;
     /* Fade the favicon out */
     transition-property: filter, opacity;
     transition-duration: 1s;
   }
   &:not([pending]) {
     /* When loading the tab, just show the favicon without a transition.
       The favicon turns into the "loading" state anyway, so we don't want
       to interfere with that. */
     transition: none;
   }
 }

 &:not([src]),
 &:-moz-broken {
   content: url("chrome://global/skin/icons/defaultFavicon.svg");
 }

 &[sharing]:not([selected]) {
   animation: var(--tab-sharing-icon-animation);
   animation-delay: -1.5s;
 }
 /* Hide the generic favicon only in horizontal mode. In vertical mode, tabs may not
 have labels (collapsed state) or we want icons and labels to line up vertically
 (expanded state).  */
 #tabbrowser-tabs[orient="horizontal"] &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]),
 &[busy] {
   display: none;
 }
}

.tab-sharing-icon-overlay,
.tab-icon-overlay,
.tab-note-icon-overlay {
 display: none;
}

.tab-sharing-icon-overlay {
 position: relative;
 -moz-context-properties: fill;
 fill: rgb(224, 41, 29);
 animation: var(--tab-sharing-icon-animation);

 &[sharing="camera"] {
   list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
 }

 &[sharing="microphone"] {
   list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }

 &[sharing="screen"] {
   list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
 }

 &[sharing]:not([selected]) {
   display: revert;
 }
}

.tab-icon-overlay {
 position: relative;
 padding: 2px;
 top: -7px;
 inset-inline-end: -7px;
 z-index: 1; /* Overlay tab title */

 #tabbrowser-tabs[orient="vertical"] & {
   top: 7px;
 }

 &[crashed] {
   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
 }

 #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
 &[pinned]:not([crashed]) {
   &[soundplaying] {
     list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
   }

   &[muted] {
     list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
   }

   &[activemedia-blocked] {
     list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
   }

   &:is([soundplaying], [muted], [activemedia-blocked]) {
     /* We want to make this look like the selected tab, but fully opaque. For that,
      * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
      * `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
      *
      * We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-bgcolor`
      * being opaque on the system themes, so even though `--lwt-accent-color` is
      * not set there, it ends up working out because we never see it through.
      *
      * We also apply one extra color on top (--audio-overlay-extra-background)
      * for hover / active feedback.
      */
     --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));
     -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));
     }

     &:hover {
       --audio-overlay-extra-background: var(--button-background-color-ghost-hover);
     }

     &:hover:active {
       --audio-overlay-extra-background: var(--button-background-color-ghost-active);
     }

     &[selected] {
       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));
     }
   }
 }

 &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
 &[crashed] {
   display: revert;
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("sidebar.visibility", "expand-on-hover") {
   /* We need these rules to apply at all times when the sidebar.visibility
   pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
   has 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="vertical"] &:is([soundplaying], [muted], [activemedia-blocked]) {
     display: revert;
   }

   #tabbrowser-tabs[orient="vertical"] &:not([crashed]) {
     &[soundplaying] {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
     }

     &[muted] {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
     }

     &[activemedia-blocked] {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
     }

     &:is([soundplaying], [muted], [activemedia-blocked]) {
       /* We want to make this look like the selected tab, but fully opaque. For that,
        * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
        * `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
        *
        * We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-bgcolor`
        * being opaque on the system themes, so even though `--lwt-accent-color` is
        * not set there, it ends up working out because we never see it through.
        *
        * We also apply one extra color on top (--audio-overlay-extra-background)
        * for hover / active feedback.
        */
       --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));
       -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));
       }

       &:hover {
         --audio-overlay-extra-background: var(--button-background-color-ghost-hover);
       }

       &:hover:active {
         --audio-overlay-extra-background: var(--button-background-color-ghost-active);
       }

       &[selected] {
         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));
       }
     }
   }
 }

 /* 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="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]) {
     display: revert;
   }
 }
}

/*
* Tab note icon that overlays the favicon for pinned tabs and the collapsed
* vertical tab strip. The horizontal tab strip and expanded vertical tab strip
* get a separate, more spacious treatment using the `.tab-notes-icon` image.
* Note: This is intended to display instead of the `.tab-icon-overlay`. This
* is defined separately from `.tab-icon-overlay` since the tab notes icon has
* fewer features (e.g. no icon interactivity) and
*/
.tab-note-icon-overlay {
 position: relative;
 padding: 2px;
 top: -7px;
 inset-inline-end: -7px;
 z-index: 1; /* Overlay tab title */
 list-style-image: url("chrome://global/skin/icons/tab-notes-12.svg");

 background-color: var(--lwt-accent-color);
 background-image: linear-gradient(transparent), linear-gradient(var(--toolbox-bgcolor));
 -moz-context-properties: fill;
 fill: var(--icon-color);
 color-scheme: var(--tab-selected-color-scheme);
 border-radius: var(--border-radius-circle);

 .browser-toolbox-background:-moz-window-inactive .tabbrowser-tab:not([selected]) & {
   background-image: linear-gradient(transparent), linear-gradient(var(--toolbox-bgcolor-inactive));
 }
 .tabbrowser-tab[selected] & {
   background-image: linear-gradient(transparent), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
 }

 .browser-toolbox-background:-moz-window-inactive .tabbrowser-tab[selected] & {
   background-image: linear-gradient(transparent), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
 }

 #tabbrowser-tabs[orient="vertical"] & {
   top: 7px;
 }

 #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[tab-note]:not([crashed], [soundplaying], [muted], [activemedia-blocked]) &,
 .tabbrowser-tab[pinned][tab-note]:not([crashed], [soundplaying], [muted], [activemedia-blocked]) & {
   display: revert;
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("sidebar.visibility", "expand-on-hover") {
   /* We need these rules to apply at all times when the sidebar.visibility
   pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
   has 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="vertical"] .tabbrowser-tab[tab-note]:not([crashed], [soundplaying], [muted], [activemedia-blocked]) & {
     display: revert;
   }
 }

 /* 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="vertical"]:not([expanded]) .tabbrowser-tab[tab-note]:not([crashed], [soundplaying], [muted], [activemedia-blocked]) & {
     display: revert;
   }
 }
}

.tab-audio-button {
 display: none;
 margin-inline-end: var(--tab-icon-end-margin);
 --icon-size: var(--icon-size-xsmall);
 --button-size-icon-small: 24px;
 --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
     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: flex;
     }

     &[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");
     }

     &[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"]) & {
   height: 2.7em;
 }

 &[pinned] {
   width: 0;
 }

 &[textoverflow] {
   &[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"],
   &:not([labeldirection]):-moz-locale-dir(rtl) {
     direction: rtl;
     mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
   }
 }
}

.tab-label {
 margin-inline: 0;
 line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */
 white-space: nowrap;
}

.tab-close-button {
 -moz-context-properties: fill, fill-opacity;
 margin-inline-end: calc(var(--tab-inline-padding) / -2);
 width: 24px;
 height: 24px;
 box-sizing: border-box;
 padding: var(--tab-close-button-padding);
 list-style-image: url(resource://content-accessible/close-12.svg);

 /* Adjust border radius by the distance to the tab. This is a hardcoded approximation
    because the exact distance is intentionally not always equal across all sides. */
 border-radius: calc(var(--tab-border-radius) - 3px);

 #tabbrowser-tabs[orient="horizontal"] &[pinned],
 :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"] &[pinned],
 #tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
   display: none;
 }
}

/* The following rulesets allow showing more of the tab title by shrinking the
* width of the close button. We don't do this in forced-colors mode since
* the button has a visible outline shown */
@media not (forced-colors) {
 #tabbrowser-tabs[orient="horizontal"] {
   .tabbrowser-tab:not([labelendaligned], [tab-note], :hover) > .tab-stack > .tab-content > .tab-close-button {
     padding-inline-start: 0;
     width: 18px;
   }

   .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover,
   &:not([closebuttons="activetab"]) .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover {
     --tab-label-mask-size: 2em;
   }
 }
}

.tab-secondary-label {
 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"] &,
 &:not([pictureinpicture]) {
   display: none;
 }
}

.tab-icon-sound-label {
 /* Set height back to equivalent of parent's 1em based
    on the .tab-icon-sound having a reduced font-size */
 height: 1.3333em;
 white-space: nowrap;
 margin: 0;
}

.tab-background {
 border-radius: var(--tab-border-radius);
 margin-block: var(--tab-block-margin);
 min-height: var(--tab-min-height);
 outline: var(--tab-outline);
 outline-offset: var(--tab-outline-offset);

 .tabbrowser-tab:hover > .tab-stack > &:not([selected], [multiselected]) {
   background-color: var(--tab-hover-background-color);
   outline-color: var(--tab-hover-outline-color);
 }

 &:is([selected], [multiselected]) {
   background-color: var(--tab-selected-bgcolor);
   box-shadow: var(--tab-selected-shadow);
   outline-color: var(--tab-selected-outline-color);
 }

 &[multiselected] {
   outline-color: var(--focus-outline-color);

   &[selected] {
     outline-width: 2px;
     outline-offset: -2px;
   }
 }

 #tabbrowser-tabs[orient="vertical"]:not([movingtab-group]) & {
   .tabbrowser-tab[small-stack] > .tab-stack > & {
     box-shadow:
       0 5px 0 -3px var(--tab-selected-bgcolor),
       0 3px var(--focus-outline-color);
   }

   .tabbrowser-tab[big-stack] > .tab-stack > & {
     box-shadow:
       0 5px 0 -3px var(--tab-selected-bgcolor),
       0 3px var(--focus-outline-color),
       0 8px 0 -3px var(--tab-selected-bgcolor),
       0 6px var(--focus-outline-color);
   }
 }

 #tabbrowser-tabs[orient="horizontal"]:not([movingtab-group]) & {
   .tabbrowser-tab[small-stack] > .tab-stack > & {
     box-shadow:
       5px 0 0 -3px var(--tab-selected-bgcolor),
       3px 0 var(--focus-outline-color);
   }

   .tabbrowser-tab[big-stack] > .tab-stack > & {
     box-shadow:
       5px 0 0 -3px var(--tab-selected-bgcolor),
       3px 0 var(--focus-outline-color),
       8px 0 0 -3px var(--tab-selected-bgcolor),
       6px 0 var(--focus-outline-color);
   }

   &:-moz-locale-dir(rtl) {
     .tabbrowser-tab[small-stack] > .tab-stack > & {
       box-shadow:
         -5px 0 0 -3px var(--tab-selected-bgcolor),
         -3px 0 var(--focus-outline-color);
     }

     .tabbrowser-tab[big-stack] > .tab-stack > & {
       box-shadow:
         -5px 0 0 -3px var(--tab-selected-bgcolor),
         -3px 0 var(--focus-outline-color),
         -8px 0 0 -3px var(--tab-selected-bgcolor),
         -6px 0 var(--focus-outline-color);
     }
   }
 }

 #tabbrowser-tabs[orient="vertical"][movingtab-group] & {
   .tabbrowser-tab[small-stack] > .tab-stack > & {
     box-shadow:
       0 5px 0 -3px var(--tab-selected-bgcolor),
       0 3px var(--dragover-tab-group-color);
   }

   .tabbrowser-tab[big-stack] > .tab-stack > & {
     box-shadow:
       0 5px 0 -3px var(--tab-selected-bgcolor),
       0 3px var(--dragover-tab-group-color),
       0 8px 0 -3px var(--tab-selected-bgcolor),
       0 6px var(--dragover-tab-group-color);
   }
 }

 #tabbrowser-tabs[orient="horizontal"][movingtab-group] & {
   .tabbrowser-tab[small-stack] > .tab-stack > & {
     box-shadow:
       5px 0 0 -3px var(--tab-selected-bgcolor),
       3px 0 var(--dragover-tab-group-color);
   }

   .tabbrowser-tab[big-stack] > .tab-stack > & {
     box-shadow:
       5px 0 0 -3px var(--tab-selected-bgcolor),
       3px 0 var(--dragover-tab-group-color),
       8px 0 0 -3px var(--tab-selected-bgcolor),
       6px 0 var(--dragover-tab-group-color);
   }

   &:-moz-locale-dir(rtl) {
     .tabbrowser-tab[small-stack] > .tab-stack > & {
       box-shadow:
         -5px 0 0 -3px var(--tab-selected-bgcolor),
         -3px 0 var(--dragover-tab-group-color);
     }

     .tabbrowser-tab[big-stack] > .tab-stack > & {
       box-shadow:
         -5px 0 0 -3px var(--tab-selected-bgcolor),
         -3px 0 var(--dragover-tab-group-color),
         -8px 0 0 -3px var(--tab-selected-bgcolor),
         -6px 0 var(--dragover-tab-group-color);
     }
   }
 }

 #tabbrowser-tabs[movingtab] & {
   transition:
     background-color 50ms ease,
     color 50ms ease,
     outline-color 50ms ease;
 }

 #tabbrowser-tabs[movingtab-group] & {
   &[dragover-groupTarget] {
     background-color: light-dark(var(--dragover-tab-group-color-pale), var(--dragover-tab-group-color));
     color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-pale));
     outline-color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-pale));
   }

   &:is([selected], [multiselected]) {
     outline-color: var(--dragover-tab-group-color);
     outline-width: 2px;
     outline-offset: -2px;
   }
 }
}

/* Keyboard focus outline */

#TabsToolbar #firefox-view-button:focus-visible > .toolbarbutton-icon,
#tabbrowser-tabs[tablist-has-focus] .tabbrowser-tab.tablist-keyboard-focus > .tab-stack > .tab-background {
 outline: var(--focus-outline);
 outline-offset: var(--focus-outline-inset);
}

/* Pinned tabs */

.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
 background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px);
 background-position: center bottom 6.5px;
 background-size: 4px 4px;
 background-repeat: no-repeat;

 #tabbrowser-tabs[orient="vertical"] & {
   background-position-y: 6px;
   background-position-x: calc(var(--tab-inline-padding) + var(--icon-size) + 1px);

   &:-moz-locale-dir(rtl) {
     background-position-x: right calc(var(--tab-inline-padding) + var(--icon-size) + 1px);
   }

   :root:not([sidebar-expand-on-hover]) &[pinned] {
     background-position-x: calc(50% + 11px);

     &:-moz-locale-dir(rtl) {
       background-position-x: calc(50% - 11px);
     }
   }
 }
}

.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected]) {
 background-position-x: left calc(var(--tab-inline-padding) + 6px);

 &:-moz-locale-dir(rtl) {
   background-position-x: right calc(var(--tab-inline-padding) + 6px);
 }
}

.tab-label[attention]:not([selected]) {
 font-weight: var(--font-weight-bold);
}

#pinned-tabs-container[orient="horizontal"] {
 max-width: max(80px, calc(100vw - var(--window-controls-size) - 300px /* Room for toolbar buttons, drag space, and unpinned tabs */));

 &:empty {
   display: none;
 }
}

#pinned-drop-indicator-icon,
#pinned-drop-indicator-text {
 display: none;
}

#pinned-drop-indicator {
 display: none;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: var(--toolbarbutton-icon-fill-attention);
 outline: 1px dashed currentColor;

 @media not (prefers-reduced-motion) {
   transition-duration: 0.25s;
   transition-timing-function: ease-in-out;
 }

 &[visible] {
   display: flex;
   border-radius: var(--border-radius-small);
   background: color-mix(in srgb, currentColor 12%, transparent);

   #pinned-drop-indicator-icon {
     width: var(--size-item-small);
     height: var(--size-item-small);
     -moz-context-properties: fill;
     fill: currentColor;
     display: inline;
   }
 }

 &[interactive] {
   outline-style: solid;
 }
}

#tabbrowser-tabs[orient="vertical"] > #pinned-drop-indicator {
 transition-property: height;

 &[visible] {
   height: 70px;
   width: calc(100% - 2 * var(--tab-inner-inline-margin));
   gap: var(--space-small);
   margin: var(--space-small) var(--tab-inner-inline-margin) 0;

   @starting-style {
     height: 0;
   }

   > #pinned-drop-indicator-text {
     display: inline;
     text-align: center;
   }

   #tabbrowser-tabs:not([expanded]) > & {
     width: var(--tab-collapsed-background-width);
     height: var(--size-item-large);

     /* stylelint-disable max-nesting-depth */
     > #pinned-drop-indicator-text {
       display: none;
     }
   }
 }
}

#tabbrowser-tabs[orient="horizontal"] > #pinned-drop-indicator {
 transition-property: width;

 &[visible] {
   margin-inline: var(--space-small);
   align-self: center;
   align-items: flex-start;
   width: calc(2 * var(--size-item-large));
   height: var(--tab-min-height);
   padding-inline-start: var(--space-small);

   @starting-style {
     width: 0;
   }

   > #pinned-drop-indicator-text {
     display: none;
   }
 }
}

/* Split View */

tab-group > tab-split-view-wrapper {
 #tabbrowser-tabs[orient="vertical"] & {
   margin-inline-end: var(--space-medium);

   #tabbrowser-tabs[expanded] & {
     margin-inline-start: calc(var(--space-medium) + var(--tab-inner-inline-margin) - var(--space-xsmall));
   }

   #tabbrowser:not([expanded]) & {
     margin-inline-start: calc(var(--space-medium) - var(--space-xsmall));
   }

   #tabbrowser-tabs:not([expanded]) & {
     .tab-group-line {
       inset-inline-start: calc(((var(--space-medium)) * -1) + 2px) !important;
     }
   }

   &[last-tab-or-split-view] > .tabbrowser-tab .tab-group-line {
     inset-block-start: calc(var(--space-xsmall) * -2);
   }

   > .tabbrowser-tab {
     overflow: visible;

     .tab-group-line {
       inset-inline-start: calc(var(--space-medium) * -1) !important;
       inset-block: calc(var(--space-xsmall) * -1);
     }

     &:last-child {
       .tab-group-line {
         display: none;

         @container vertical-tabs-container (max-width: 210px) {
           display: flex;
         }
       }
     }
   }
 }
}

#tabbrowser-tabs[orient="horizontal"] tab-split-view-wrapper {
 margin-block: var(--tab-block-margin);
 margin-inline: 0;
 align-items: flex-end;
 flex: 100 100;
 padding: 2px 0;
 min-width: calc(var(--tab-min-width-pref, var(--tab-min-width)) * 2 + 6px);
 max-width: var(--tab-max-width);
 transition: var(--tab-width-transition);

 &[last-tab-or-split-view] .tabbrowser-tab:last-child .tab-group-line {
   inset-inline-end: calc(var(--tab-border-radius) / 2);
 }

 &:has(tab:is([muted], [soundplaying], [activemedia-blocked])) {
   min-width: 200px;
 }

 tab-group[collapsed] &:not([hasactivetab]) {
   min-width: 0 !important;
   max-width: 0 !important;
   max-height: 0 !important;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

 .tabbrowser-tab {
   padding-inline: 2px;
   .tab-background {
     --tab-min-height: 32px;

     .tab-group-line {
       inset-block-end: calc(((var(--tab-block-margin) / 2) + var(--space-xsmall)) * -1);
       inset-inline-start: calc(var(--space-small) * -2);
     }
   }

   tab-group & {
     overflow: visible;
   }
 }
}

#tabbrowser-tabs tab-split-view-wrapper {
 display: grid;
 grid-template-columns: 50% 50%;
 margin-inline: var(--space-small);
 padding: var(--space-xsmall);
 border-radius: var(--tab-border-radius);
 position: relative; /* prevents splitview wrappers from shifting during other drag events*/

 &[hasactivetab] {
   background-color: var(--tab-hover-background-color);

   @media (forced-colors) {
     border: 1px solid SelectedItem;
     background: SelectedItemText;
   }
 }

 .tabbrowser-tab {
   padding-block: 0 !important;

   .tab-background {
     margin-inline: var(--space-xxsmall);
     margin-block: 0;
   }

   .tab-content {
     padding-inline: var(--space-medium);

     @media (forced-colors) {
       #tabbrowser-tabs tab-split-view-wrapper[hasactivetab] .tabbrowser-tab:not([selected]) & {
         color: SelectedItem;
       }
     }
   }

   &:first-child {
     .tab-background {
       margin-inline-end: 0;
     }

     tab-split-view-wrapper:not([hasactivetab]) & {
       border-block-end: transparent;
     }
   }

   &:last-child {
     .tab-background {
       margin-inline-start: 0;
     }

     .tab-content {
       padding-inline-start: var(--space-medium);
     }
   }
 }

 &:not([hasactivetab]) {
   outline: var(--tab-outline);
   outline-offset: var(--tab-outline-offset);

   &:hover {
     background-color: var(--tab-hover-background-color);
     outline-color: var(--tab-hover-outline-color);
   }

   .tabbrowser-tab {
     .tab-background {
       outline-color: transparent;
     }

     &:hover .tab-background {
       background-color: transparent;
       outline-color: transparent;
     }

     &:last-child {
       border-inline-start: 1px solid var(--toolbarbutton-icon-fill);
     }
   }
 }

 #tabbrowser-tabs[orient="vertical"] & {
   border-radius: var(--tab-border-radius);
   gap: var(--space-xsmall);
   grid-template-columns: 49.5% 49.5%;

   @container vertical-tabs-container (max-width: 210px) {
     grid-template-columns: 1fr;

     &:not([hasactivetab]) .tabbrowser-tab {
       &:first-child {
         border-block-end: 1px solid var(--toolbarbutton-icon-fill);
         border-inline-end: transparent;
       }

       &:last-child {
         border-inline-start: transparent !important;
       }
     }
   }
 }

 #tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
   .tab-close-button {
     top: -5px;
     inset-inline-start: -7px;
   }
 }
}

/* Tab Groups */

/*
* .tab-group-line needs to span the drop shadows + space between tabs in the
* same tab group so that the whole tab group appears to be underlined by an
* unbroken line.
*
* The last tab in a tab group should have its group underline stop
* at the end edge of the tab itself, otherwise it looks like the tab group
* extends too far past the edge of the tab.
*
* When a tab group with the currently selected tab is collapsed, the selected
* tab remains visible along with its underline. If there are other tabs in
* the group that have been hidden by the collapse, a counter indicating the
* number of hidden tabs appears at the end of the group, which continues
* the underline, so in this case the line should not terminate underneath
* the tab.
*
*/
.tab-group-line {
 display: none;
 position: absolute;
 background-color: var(--tab-group-line-color);

 #tabbrowser-tabs[orient="horizontal"] & {
   height: var(--tab-group-line-thickness);
   inset-inline: calc(-1 * var(--tab-overflow-clip-margin));
   inset-block-end: var(--tab-group-line-toolbar-border-distance);

   tab-group:not([collapsed]) > .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > &,
   tab-group[collapsed]:not([hasmultipletabs]) & {
     inset-inline-end: calc(var(--tab-border-radius) / 2);
     border-start-end-radius: calc(var(--tab-group-line-thickness) / 2);
     border-end-end-radius: calc(var(--tab-group-line-thickness) / 2);
   }
 }

 #tabbrowser-tabs[orient="vertical"] & {
   width: var(--tab-group-line-thickness);
   inset-block: -3px -2px;
   inset-inline: 2px 0;

   #tabbrowser-tabs[expanded] & {
     inset-inline-start: 0;
   }

   tab-group:not([collapsed]) > .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > &,
   tab-group[collapsed]:not([hasmultipletabs]) & {
     inset-block-end: 0;
     border-end-start-radius: calc(var(--tab-group-line-thickness) / 2);
     border-end-end-radius: calc(var(--tab-group-line-thickness) / 2);
   }
 }

 tab-group & {
   display: flex;
 }

 /* prettier-ignore */
 #tabbrowser-tabs[movingtab]:not([movingtab-group],[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: var(--border-radius-xsmall);
 }

 #tabbrowser-tabs:is([movingtab-group], [movingtab-ungroup]) &:is([selected], [multiselected]) {
   display: none;
 }
}

tab-group {
 /*
  * Let the tab bar flexbox distribute space between all tabs evenly, regardless of
  * whether they are children of the tab bar directly or children of tab groups
  */
 display: contents;

 --tab-group-line-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));

 #tabbrowser-tabs[orient="horizontal"] &[movingtabgroup][collapsed] > .tabbrowser-tab[visuallyselected],
 #tabbrowser-tabs[orient="horizontal"] &[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]) {
   min-width: 0 !important;
   max-width: 0 !important;
   padding: 0;
   overflow-clip-margin: 0;
 }

 #tabbrowser-tabs[orient="vertical"] &[movingtabgroup][collapsed] > .tabbrowser-tab[visuallyselected],
 #tabbrowser-tabs[orient="vertical"] &[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]),
 #tabbrowser-tabs[orient="vertical"] &[collapsed] > tab-split-view-wrapper:not([hasactivetab]) {
   display: none;
 }

 &[collapsed] {
   --tab-group-line-color: light-dark(var(--tab-group-color), var(--tab-group-color-pale));
   /* Override xul.css, we're using the collapsed attribute for our own purposes */
   visibility: inherit;
 }
}

#tabbrowser-tabs[orient="vertical"][expanded] {
 tab-group > :is(.tab-group-label-container, .tabbrowser-tab),
 &[movingtab][movingtab-addToGroup]:not([movingtab-group], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) {
   margin-inline-start: var(--space-medium);
 }
}

/**
* Tab group label and overflow counter should appear to be underlined
* with the same continuous line as the group's tabs. This is achieved
* by positioning pseudoelement of the appropriate size and color.
*/
.tab-group-label-container,
.tab-group-overflow-count-container {
 position: relative;

 #tabbrowser-tabs:is([orient="horizontal"], [orient="vertical"]:not([expanded])) tab-group:not([collapsed]) > &::after,
 #tabbrowser-tabs:is([orient="horizontal"], [orient="vertical"]:not([expanded])) tab-group[hasactivetab] > &::after,
 #tabbrowser-tabs[orient="vertical"] tab-group[hasactivetab][hasmultipletabs] > &.tab-group-overflow-count-container::after {
   content: "";
   background-color: var(--tab-group-line-color);
   position: absolute;
 }

 #tabbrowser-tabs[orient="vertical"][expanded] & {
   contain: inline-size;
 }
}

.tab-group-label-container {
 &[dragtarget] {
   z-index: 3;
   position: absolute;
   pointer-events: none; /* avoid blocking dragover events on scroll buttons */
 }

 @media (prefers-reduced-motion: no-preference) {
   #tabbrowser-tabs[movingtab] &:not(:active) {
     transition: var(--tab-dragover-transition);
   }
 }

 /*
  * Provide some empty space to either side of the tab group label.
  * Use margin at the start because the group line should not extend beyond
  * the tab group label.
  * Use padding at the end because the group line should extend to connect to
  * the group line of the first tab in the group.
  */
 #tabbrowser-tabs[orient="horizontal"] & {
   margin-inline-start: 3px;
   padding-inline-end: 3px;
 }
 #tabbrowser-tabs[orient="vertical"] & {
   margin-block-start: var(--space-small);

   tab-group:not([collapsed]) > &,
   tab-group[collapsed][hasactivetab] > & {
     padding-block-end: var(--space-small);
   }
 }

 #tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]) > &::after,
 #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed][hasactivetab]:not([movingtabgroup]) > &::after {
   height: var(--tab-group-line-thickness);
   inset: auto 0 var(--tab-group-line-toolbar-border-distance);
   border-start-start-radius: 1px;
   border-end-start-radius: 1px;
 }

 #tabbrowser-tabs[orient="vertical"] tab-group:not([collapsed]) > &::after,
 #tabbrowser-tabs[orient="vertical"] tab-group[collapsed][hasactivetab]:not([movingtabgroup]) > &::after {
   width: var(--tab-group-line-thickness);
   inset-block: 0;
   inset-inline: 2px auto;
   border-start-start-radius: 1px;
   border-start-end-radius: 1px;
 }
}

.tab-group-overflow-count-container {
 display: none;

 #tabbrowser-tabs:not([movingtab]) tab-group[collapsed][hasmultipletabs][hasactivetab] > & {
   display: flex;
 }

 /*
  * Similar to .tab-group-label, use padding/margin to space the indicator
  * correctly relative to the group line.
  */
 #tabbrowser-tabs[orient="horizontal"] & {
   padding-inline-end: 3px;
   margin-inline-end: 3px;
 }
 #tabbrowser-tabs[orient="vertical"] & {
   #tabbrowser-tabs[expanded] & {
     margin-inline-start: var(--space-medium);
   }

   tab-group:not([collapsed]) > & {
     margin-block-end: var(--space-small);
   }
 }

 #tabbrowser-tabs[orient="horizontal"] tab-group[hasactivetab][hasmultipletabs] > &::after {
   height: var(--tab-group-line-thickness);
   inset: auto 0 var(--tab-group-line-toolbar-border-distance);
   border-start-end-radius: 1px;
   border-end-end-radius: 1px;
 }

 #tabbrowser-tabs[orient="vertical"] tab-group[hasactivetab][hasmultipletabs] > &::after {
   width: var(--tab-group-line-thickness);
   inset-block: 0;
   border-end-start-radius: 1px;
   border-end-end-radius: 1px;
 }

 #tabbrowser-tabs:not([expanded]) &::after {
   inset-inline: 2px auto;
 }
}

.tab-group-overflow-count {
 color: var(--tab-group-line-color);
 margin: 0;
 padding: var(--space-small);

 #tabbrowser-tabs[orient="vertical"] & {
   margin-inline-start: var(--tab-inner-inline-margin);
 }
}

.tab-group-label-hover-highlight {
 tab-group[collapsed] & {
   /* Since effective border radius is the sum of border-radius and box-shadow
    * spread radius, make sure that these values vary together in order to add
    * up to --tab-border-radius.
    */
   border-radius: calc(var(--tab-border-radius) - var(--tab-group-label-highlight-radius));

   #tabbrowser-tabs[orient="horizontal"] & {
     padding-block: 4px;
   }

   #tabbrowser-tabs[orient="vertical"][expanded] & {
     margin-inline-end: var(--space-medium);
   }
 }

 #tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
   /*
    * Keep tab group label square in collapsed sidebar centered without
    * margin: auto, similar to how tabs' .tab-background use margin in order
    * to stay centered in the collapsed sidebar. This helps prevent the tab
    * group label from jumping around during the sidebar collapsed-to-expanded
    * transition.
    */
   margin-inline: calc(var(--tab-inner-inline-margin) + (var(--tab-collapsed-background-width) - 24px) / 2);
 }

 tab-group[collapsed]:not([movingtabgroup]) &:hover,
 tab-group[previewpanelactive] & {
   background-color: var(--tab-hover-background-color);
   box-shadow: 0 0 0 var(--tab-group-label-highlight-radius) var(--tab-hover-background-color);
 }
}

.tab-group-label {
 -moz-window-dragging: no-drag;
 text-align: center;
 font-weight: var(--font-weight-semibold);
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 text-shadow: none;
 /* .tab-group-label-hover-highlight shadow surrounds the .tab-group-label; keep
  * the border radius of the inside element 2px smaller so that these two elements
  * look good when hovering over a collapsed tab group label.
  */
 border-radius: calc(var(--tab-border-radius) - 2px);
 line-height: calc(var(--tab-group-label-height) - var(--tab-group-line-thickness));
 min-height: var(--tab-group-label-height);
 min-width: var(--tab-group-label-height);
 max-width: 10em;
 padding-inline: var(--tab-group-label-padding);
 color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark));
 background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
 margin: auto 0;

 /* Animations for hovering a tab(s) over a collapsed tab group. Indicates to
  * the user that they can drop the tab(s) into the tab group.
  */
 transition: box-shadow var(--tab-group-label-animation-duration);

 &[dragover-groupTarget] {
   box-shadow: color-mix(in oklab, light-dark(var(--tab-group-color), var(--tab-group-color-pale)) 30%, transparent) 0 0 0
     var(--tab-group-label-highlight-thickness);
 }

 tab-group[collapsed] > .tab-group-label-container & {
   background-color: light-dark(var(--tab-group-color-pale), var(--tab-group-color));
   color: light-dark(var(--tab-group-color), var(--tab-group-color-pale));
   outline: 1px solid light-dark(var(--tab-group-color), var(--tab-group-color-pale));
   outline-offset: -1px;
 }

 #tabbrowser-tabs[tablist-has-focus] &.tablist-keyboard-focus {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }

 #tabbrowser-tabs[orient="vertical"] & {
   height: 24px;
   min-height: auto;
   line-height: 24px;
   min-width: 24px;

   #tabbrowser-tabs:not([expanded]) & {
     width: 24px;
     max-width: 24px;
     font-size-adjust: 0;

     &::first-letter {
       font: message-box;
       font-weight: var(--font-weight-semibold);
       line-height: 24px;
     }
   }

   #tabbrowser-tabs[expanded] & {
     align-self: start;
     max-width: -moz-available;
     margin-inline-end: var(--space-medium);
   }
 }
}

.tab-group-editor-panel {
 --panel-width: 22em;
 --panel-padding: var(--space-large);
 --panel-separator-padding: var(--space-medium) 0;
 font: menu;

 .panel-header {
   min-height: auto;
   > h1 {
     margin-top: 0;
   }
 }

 .panel-body {
   padding-block: var(--space-medium);
 }

 &.tab-group-editor-mode-create .tab-group-edit-mode-only,
 &:not(.tab-group-editor-mode-create) .tab-group-create-mode-only {
   display: none;
 }

 .tab-group-editor-name {
   display: flex;
   flex-direction: column;
   > label {
     margin-inline: 0;
     margin-bottom: var(--space-small);
   }
   > input[type="text"] {
     padding: var(--space-medium);
   }
 }

 .tab-group-editor-swatches {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
 }

 input[name="tab-group-color"] {
   width: 0;
   height: 0;
   opacity: 0;
   margin: 0;
   position: absolute;
   pointer-events: none;
   top: -100px;
 }

 .tab-group-editor-swatch {
   font-size: 0;
   width: 16px;
   height: 16px;
   /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
   padding: var(--focus-outline-offset);
   border: var(--focus-outline-width) solid transparent;
   border-radius: var(--border-radius-medium);
   background-clip: content-box;
   background-color: light-dark(var(--tabgroup-swatch-color), var(--tabgroup-swatch-color-invert));

   input:checked + & {
     border-color: var(--focus-outline-color);
   }

   input:disabled + & {
     opacity: 0.5;
   }

   input:focus-visible + & {
     outline: 1px solid var(--focus-outline-color);
     outline-offset: 1px;
   }
 }

 .tab-group-edit-actions,
 .tab-group-delete {
   padding-block: 0;
   > toolbarbutton {
     justify-content: flex-start;
   }
 }

 toolbarbutton {
   margin: 0;
 }
}

.tab-group-editor-panel.tab-group-editor-panel-expanded {
 --panel-width: 25em;
}

@media not (prefers-contrast) {
 #tabGroupEditor_deleteGroup {
   color: var(--text-color-error);
 }
}

/* Tab Notes */
.tab-note-editor-panel {
 --panel-width: 300px;
 --arrowpanel-header-min-height: auto;
 padding-inline: var(--space-xsmall);
 padding-block: 0;
 font: menu;

 .panel-header {
   padding-block-start: 0;

   & > h1 {
     margin: var(--space-small);
   }
 }

 toolbarseparator {
   padding-inline: 0;
 }

 .panel-body {
   display: flex;
   padding-block: var(--space-medium);
 }

 .panel-action-row {
   display: flex;
   justify-content: space-between;
   gap: var(--space-large);
 }
}

#tab-note-text {
 width: 100%;
 padding: var(--space-medium);
 resize: none;
 min-height: 3lh;
 max-height: 352px;
 overflow-y: auto;
}

#tab-note-overflow-indicator {
 font-size: 0.85em;
 visibility: hidden;
 color: var(--text-color-deemphasized);

 /* This will apply to both the overflow=warn state (the user has almost
  * overflowed the limit) and the overflow=overflow state (the user actually
  * has overflowed the limit).
  */
 .tab-note-editor-panel[overflow] & {
   visibility: inherit;
 }

 .tab-note-editor-panel[overflow="overflow"] & {
   color: var(--text-color-error);
 }
}

/* Tab Overflow */

#tabbrowser-arrowscrollbox,
#pinned-tabs-container {
 &[orient="horizontal"] {
   &: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: 0.5px solid rgba(255, 255, 255, 0.2);
     pointer-events: none;
     position: relative;
     border-bottom: 0.5px solid transparent;
   }

   &:not([scrolledtostart])::part(overflow-start-indicator) {
     margin-inline: -0.5px -6.5px;
   }

   &:not([scrolledtoend])::part(overflow-end-indicator) {
     margin-inline: -6.5px -0.5px;
   }

   &:-moz-locale-dir(rtl)::part(overflow-start-indicator),
   &:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
     transform: scaleX(-1);
   }
 }

 &[orient="vertical"] {
   &::part(overflow-start-indicator),
   &::part(overflow-end-indicator) {
     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;
     height: 16px;
     z-index: 1;

     margin-block: 0 -16px;
   }

   /* Flip the fade at the bottom */
   &::part(overflow-end-indicator) {
     transform: scaleY(-1);
     margin-block: -16px 0;
   }
 }

 /* Scroll arrows */

 &::part(scrollbutton-up),
 &::part(scrollbutton-down) {
   --arrowscrollbox-scrollicon-border-radius: var(--tab-border-radius);
   --arrowscrollbox-scrollicon-hover-background-color: var(--toolbarbutton-hover-background);
   --arrowscrollbox-scrollicon-active-background-color: var(--toolbarbutton-active-background);
   --arrowscrollbox-scrollicon-padding: var(--toolbarbutton-inner-padding) 2px;

   appearance: none;
   padding: 0 4px;
   fill: var(--toolbarbutton-icon-fill);
   margin: 0;
 }

 #navigator-toolbox:not(:hover) &:not([highlight])::part(scrollbutton-down) {
   --arrowscrollbox-scrollicon-transition: 1s background-color ease-out;
 }

 &[highlight]::part(scrollbutton-down) {
   --arrowscrollbox-scrollicon-background-color: SelectedItem;
 }

 &[scrolledtostart]::part(overflow-start-indicator),
 &[scrolledtoend]::part(overflow-end-indicator) {
   opacity: 0;
 }

 &::part(overflow-start-indicator),
 &::part(overflow-end-indicator) {
   transition: opacity 150ms ease;
 }
}

#tabbrowser-arrowscrollbox[orient="horizontal"]::part(scrollbox) {
 contain: inline-size;
}

/* Vertical tabs styling */

#tabbrowser-arrowscrollbox[orient="vertical"] {
 /* Don't allow resizing below the height of 3 tabs */
 min-height: calc(3 * var(--tab-height-with-margin-padding));

 &::part(scrollbutton-up),
 &::part(scrollbutton-down) {
   display: none;
 }

 &::part(scrollbox) {
   scrollbar-width: thin;
   scrollbar-color: var(--vertical-tabs-scrollbar-color);
   overflow-y: auto;
 }
}

#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#vertical-tabs-newtab-button {
 appearance: none;
 min-height: var(--tab-min-height);
 line-height: var(--tab-label-line-height);
 border-radius: var(--tab-border-radius);
 padding: 0 calc(var(--tab-inline-padding) - var(--tab-inner-inline-margin));
 width: var(--tab-collapsed-background-width);
 margin-inline: var(--tab-inner-inline-margin);

 #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
   display: none;
 }

 &:hover {
   background-color: var(--tab-hover-background-color);
   outline-color: var(--tab-hover-outline-color);
 }

 &:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-inset);
 }

 > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: var(--tab-icon-end-margin);
 }
}

/* For #vertical-tabs-newtab-button, shown when tabs are overflowing, the gap
* with the other items comes from the grid-gap on tabbrowser-tabs which is a
* flex container. #tabs-newtab-button is a child of the arrowscrollbox where
* we don't want a gap (between tabs), so we have to add some margin.
*/
#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
 margin-block: var(--tab-block-margin);
}

#tabbrowser-tabs[expanded] {
 > #vertical-tabs-newtab-button {
   width: auto;
 }

 > #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
   width: 100%;
 }
}

#vertical-tabs {
 overflow: hidden;
 display: none;

 &[visible] {
   display: flex;
   flex-grow: 1;
   container-type: inline-size;
   container-name: vertical-tabs-container;
 }
}

#pinned-tabs-container[orient="vertical"] {
 /* Don't allow resizing below the height of 1 row of pinned tabs */
 min-height: var(--tab-height-with-margin-padding);

 &:empty {
   display: none;
 }

 &::part(scrollbutton-up),
 &::part(scrollbutton-down) {
   display: none;
 }

 &::part(scrollbox) {
   scrollbar-width: thin;
   scrollbar-color: var(--vertical-tabs-scrollbar-color);
   overflow-y: auto;
 }

 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-background:not([selected], [multiselected]) {
   background-color: color-mix(in srgb, currentColor 7%, transparent);
 }

 &::part(items-wrapper) {
   flex: 0 1 0;
 }

 :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)) / 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
     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. */
     &::part(items-wrapper) {
       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);
     }

     .tab-label-container {
       display: none;
     }
   }

   .tab-content {
     justify-content: center;
   }

   #tabbrowser-tabs {
     display: grid;
   }

   #tabbrowser-tabs[expanded] > & {
     .tab-background {
       margin-inline: var(--tab-pinned-margin-inline-expanded);
     }

     &::part(items-wrapper) {
       padding-inline: var(--tab-pinned-container-margin-inline-expanded);
     }
   }
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media -moz-pref("sidebar.visibility", "expand-on-hover") {
   /* We need this rule to apply at all times when the sidebar.visibility
   pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
   has 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. */
   grid-template-columns: 1fr;
 }
}

#vertical-pinned-tabs-splitter {
 display: block;
 border-top: var(--tabstrip-inner-border);
 border-bottom: none;
 background-color: transparent;
 margin-inline: var(--tab-inner-inline-margin);
 min-height: 2px;

 #pinned-tabs-container:empty + & {
   display: none;
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media not -moz-pref("sidebar.verticalTabs") {
   display: none;
 }

 &:hover {
   background-color: var(--focus-outline-color);
   border-radius: var(--border-radius-medium);
 }

 /* 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[expanded] > & {
     border-top-color: transparent;
   }
 }
}

#tabbrowser-tabs[orient="vertical"] {
 --tab-min-width: unset;
 --tab-inline-padding: calc((var(--tab-collapsed-width) - var(--icon-size)) / 2);

 min-height: 0;
 display: flex;
 flex-direction: column;
 align-content: flex-start;
 grid-gap: var(--space-small);

 &::after {
   content: "";
   border-bottom: var(--tabstrip-inner-border);
   margin-inline: var(--tab-inner-inline-margin);
 }

 &:not([overflow])::after {
   border-color: transparent;
 }

 /* 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. */
   &:not([expanded])::after {
     border-color: transparent;
   }
 }

 .tabbrowser-tab {
   flex: none;
   padding-inline: 0;
   padding-block: 3px 2px;

   /* prevent the shadow of the close button from being cutoff by the toolbar on the first tab */
   &:nth-child(1 of :not([hidden], [pinned])) {
     padding-block-start: 5px;
   }
 }

 .tab-label-container {
   contain: inline-size;
 }

 .tab-background {
   flex-direction: row-reverse;
   margin-inline: var(--tab-inner-inline-margin);
 }

 &:not([expanded]) {
   .tabbrowser-tab[pinned] {
     width: var(--tab-collapsed-width);
   }

   .tab-background {
     width: var(--tab-collapsed-background-width);
   }

   .tab-label-container {
     display: none;
   }

   .tab-close-button {
     opacity: 0;
     width: 15px;
     height: 15px;
     padding: 3.5px;
     margin: 0;
     fill: var(--tab-selected-textcolor);
     /* We want to make this look like the selected tab, but fully opaque. For that,
      * we build a stack of `--lwt-accent-color` (guaranteed opaque), then
      * `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
      *
      * We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-bgcolor`
      * being opaque on the system themes, so even though `--lwt-accent-color` is
      * not set there, it ends up working out because we never see it through.
      *
      * We also apply one extra color on top (--close-button-extra-background)
      * for hover / active feedback.
      */
     --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));
     color-scheme: var(--tab-selected-color-scheme);
     outline-color: var(--tab-selected-outline-color);
     box-shadow: var(--tab-selected-shadow);
     border-radius: var(--border-radius-circle);
     display: block;
     position: absolute;
     inset: auto;
     top: -3px;
     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));
     }

     &:hover {
       --close-button-extra-background: var(--button-background-color-ghost-hover);
     }

     &:hover:active {
       --close-button-extra-background: var(--button-background-color-ghost-active);
     }

     .tabbrowser-tab:hover & {
       opacity: 1;
     }

     &[pinned] {
       display: none;
     }

     /* stylelint-disable-next-line media-query-no-invalid */
     @media -moz-pref("sidebar.visibility", "expand-on-hover") {
       /* Tab close button when the sidebar is collapsed should
       not be shown when expand on hover is enabled because once
       you hover over the launcher to use the button, the launcher
       starts to expand and the button is no longer shown. Users can
       rely on the close button within the tab once expanded.
        We need this rule to apply at all times when the sidebar.visibility
   pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
   has 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. */
       display: none;
     }
   }
 }

 &[expanded] {
   --tab-icon-end-margin: 7.5px;

   .tabbrowser-tab {
     max-width: none;

     .tab-close-button {
       margin-inline-end: calc(var(--tab-close-button-padding) / -2);
     }

     &:not(:hover) .tab-close-button:not([selected]) {
       display: none;
     }
   }
 }
}

/* Tab drag and drop */

.tab-drop-indicator {
 width: var(--icon-size-xsmall);
 margin-inline-start: calc(var(--icon-size-xsmall) * -1);
 background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;
 position: relative;
 z-index: 2;
 pointer-events: none;
}

.dragfeedback-tab {
 appearance: none;
 opacity: 0.65;
 -moz-window-shadow: none;
}

/* Firefox View button and menu item */

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon {
 background-color: var(--tab-selected-bgcolor);
 box-shadow: var(--tab-selected-shadow);
 outline-color: var(--tab-selected-outline-color);
 color: var(--tab-selected-textcolor);
 color-scheme: var(--tab-selected-color-scheme);
}

/* about:firefoxview is disabled in Base Browser. See tor-browser#42037.
* Therefore we always hide #firefox-view-button, regardless of private
* browsing. Here we only want to draw the border if there is a non-hidden
* toolbar item before the tabs. */
:root :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) ~ #tabbrowser-tabs {
 border-inline-start: var(--tabstrip-inner-border);
 padding-inline-start: 2px;
 margin-inline-start: 2px;
}

/* about:firefoxview is disabled in Base Browser. Always hide the toolbar button
* and menu item regardless of private browsing. See tor-browser#42037. */
#firefox-view-button,
#menu_openFirefoxView {
 display: none;
}

toolbar:not(#TabsToolbar) #firefox-view-button {
 background-position: top 25% right 25%;

 /* RTL notification dot */
 &:-moz-locale-dir(rtl) {
   background-position-x: left 25%;
 }
}

:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button {
 background-position: top 25% left 22px;

 &:-moz-locale-dir(rtl) {
   background-position-x: right 22px;
 }
}

/* New tab button */

#tabs-newtab-button,
#vertical-tabs-newtab-button,
#TabsToolbar #new-tab-button {
 list-style-image: url(chrome://global/skin/icons/plus.svg);
}

#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button,
#tabbrowser-tabs[orient="horizontal"] > #vertical-tabs-newtab-button,
#tabbrowser-tabs[orient="vertical"]:not([overflow]) > #vertical-tabs-newtab-button,
#tabbrowser-arrowscrollbox[overflowing] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#tabbrowser-tabs:not([hasadjacentnewtabbutton])[orient="horizontal"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
#TabsToolbar[customizing] #tabs-newtab-button {
 display: none;
}

/* All tabs button and menupopup */

#alltabs-button {
 list-style-image: url("chrome://browser/skin/tabs.svg");

 #TabsToolbar & {
   list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
 }

 #tabbrowser-tabs[hiddensoundplaying] ~ & > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg);
   box-shadow: none;
   /* Match the color of the button, rather than label default. */
   color: inherit;
   display: block;
   -moz-context-properties: fill, fill-opacity, stroke;
   fill: currentColor;
   stroke: transparent;
   /* "!important" is necessary to override the rule in toolbarbutton.css */
   margin: -7px 0 0 !important;
   margin-inline-end: -4px !important;
   min-width: var(--icon-size-xsmall);
   min-height: var(--icon-size-xsmall);
 }
}

/* The list of tabs is in its own panel-subview-body which will scroll. We don't
  want any padding below the scrollbar, so remove the bottom padding
  from the outer panel-subview-body. */
#allTabsMenu-allTabsView > .panel-subview-body {
 padding-bottom: 0;
}

#allTabsMenu-allTabsView-tabs {
 padding-top: 0;
}

#allTabsMenu-dropIndicatorHolder {
 display: block;
 position: relative;
}

#allTabsMenu-dropIndicator {
 background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;
 display: block;
 position: absolute;
 transform: rotate(-90deg);
 width: var(--icon-size-xsmall);
 height: 29px;
 inset-inline-start: 8px;
 top: 0;
 pointer-events: none;

 &:-moz-locale-dir(rtl) {
   transform: rotate(90deg);
 }
}

#allTabsMenu-groupsView {
 &:empty,
 &:empty + #allTabsMenu-groupsSeparator {
   display: none;
 }
}

.all-tabs-item {
 border-radius: var(--arrowpanel-menuitem-border-radius);
 margin-inline: var(--arrowpanel-menuitem-margin-inline);

 &.grouped {
   /* Indent further by the size of a favicon and the favicon's end margin. */
   margin-inline-start: calc(var(--arrowpanel-menuitem-margin-inline) + 16px + 8px);
 }

 &[selected] {
   font-weight: var(--font-weight-semibold);
 }

 > toolbarbutton {
   margin: 0;
   color: var(--button-text-color-ghost);
   background-color: var(--button-background-color-ghost);

   &:hover {
     color: var(--button-text-color-ghost-hover);
     background-color: var(--button-background-color-ghost-hover);
   }

   &:hover:active {
     color: var(--button-text-color-ghost-active);
     background-color: var(--button-background-color-ghost-active);
   }

   &.all-tabs-container-indicator {
     position: relative;
     &::before {
       content: "";
       position: absolute;
       inset: 2px -3px;
       background: var(--identity-tab-color);
       width: 2px;
     }
   }
 }
}

.all-tabs-button {
 list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
}

.all-tabs-secondary-button {
 -moz-context-properties: fill;
 fill: currentColor;

 > label {
   display: none !important; /* override panelUI-shared.css */
 }

 &:hover {
   opacity: 1;
 }
}

.all-tabs-mute-button[soundplaying] {
 list-style-image: url(chrome://global/skin/media/audio.svg);
}

.all-tabs-mute-button[muted] {
 list-style-image: url(chrome://global/skin/media/audio-muted.svg);
}

.all-tabs-close-button {
 list-style-image: url(resource://content-accessible/close-12.svg);

 > .toolbarbutton-icon {
   margin-inline: 2px !important; /* override panelUI-shared.css */
 }
}

.tab-throbber-tabslist {
 height: 16px;
 width: 16px;

 &[busy] {
   list-style-image: url("chrome://global/skin/icons/loading.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.7;
 }

 &[progress] {
   color: var(--tab-loading-fill);
   opacity: 1;
 }
}

/*
* Tab note icon that displays inline on unpinned tabs in the horizontal tab
* strip and the expanded vertical tab strip. Pinned tabs and the collapsed
* vertical tab strip get a separate space-constrained treatment using the
* `.tab-notes-icon-overlay` image.
*/
.tab-note-icon {
 display: none;
 box-sizing: border-box;

 width: calc(var(--icon-size-xsmall) + 8px);
 height: calc(var(--icon-size-xsmall) + 8px);
 padding: 4px;
 margin-inline-end: calc(var(--tab-close-button-padding) / -2);

 list-style-image: url("chrome://global/skin/icons/tab-notes-12.svg");
 -moz-context-properties: fill;
 fill: var(--icon-color);

 #tabbrowser-tabs[orient="vertical"][expanded] & {
   /*
    * Keep the tab note icon out of the way of the close button, even when
    * the close button is not showing because the tab is not being hovered.
    */
   .tabbrowser-tab:not(:hover) & {
     /* .tab-close-button is 24px wide with border-box sizing */
     margin-inline-end: calc(24px - var(--tab-close-button-padding));
   }
   .tabbrowser-tab:is([visuallyselected], :hover) & {
     margin-inline-end: calc(var(--tab-close-button-padding) / -2);
   }
 }
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("browser.tabs.notes.enabled") and (not -moz-pref("sidebar.visibility", "expand-on-hover")) {
 .tabbrowser-tab[tab-note]:not([pinned]) .tab-note-icon {
   #tabbrowser-tabs[orient="horizontal"] &,
   #tabbrowser-tabs[orient="vertical"][expanded] & {
     display: revert;
   }
 }
}

/* NOTE(emilio): The double class is an specificity hack to win over the
* .subviewbutton-iconic rules */
.tab-group-icon.tab-group-icon {
 list-style-image: url("chrome://browser/skin/tabbrowser/tab-group-chicklet.svg");
 --menuitem-icon: url("chrome://browser/skin/tabbrowser/tab-group-chicklet.svg");
 -moz-context-properties: fill, stroke;
 fill: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
 stroke: light-dark(var(--tab-group-color), var(--tab-group-color-invert));

 &.tab-group-icon-collapsed {
   fill: light-dark(var(--tab-group-color-pale), var(--tab-group-color));
   stroke: light-dark(var(--tab-group-color), var(--tab-group-color-pale));
 }

 &.tab-group-icon-closed {
   fill: transparent;
   stroke: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
 }
}

#tab-group-suggestions-heading,
#tab-group-main {
 flex-direction: column;
}

#tab-group-default-actions {
 padding-top: var(--space-medium);
}

#tab-group-default-actions,
#tab-group-suggestions-load-actions,
#tab-group-suggestion-button,
#tab-group-suggestions-message-container {
 display: none;
}

#tab-group-suggestions-heading:not([hidden]),
#tab-group-main:not([hidden]),
#tab-group-suggestions-separator:not([hidden]),
#tab-group-suggestions-load-actions:not([hidden]),
#tab-group-suggestions-loading:not([hidden]),
#tab-group-default-actions:not([hidden]),
#tab-group-suggestion-button:not([hidden]) {
 display: flex;
}

#tab-group-suggestions-message-container:not([hidden]),
#tab-group-suggestions-container:not([hidden]) {
 display: block;
}

#tab-group-suggestions-disclaimer > a {
 display: inline;
 color: inherit;
}

#tab-group-suggestions-disclaimer:not([hidden]) {
 display: initial;
}

#tab-group-select-checkbox {
 margin-top: 0.5em;
}

#tab-group-suggestion-button {
 --button-border-color-ghost: var(--border-color-selected);
 color: var(--color-accent-primary);
 width: 100%;

 &:hover {
   --button-border-color-ghost-hover: var(--border-color-selected);
 }
}

#tab-group-suggestions {
 margin-inline-start: var(--space-xlarge);
 margin-block-start: var(--space-xlarge);
 display: flex;
 flex-direction: column;
 gap: var(--space-xlarge);
}

#tab-group-suggestions-loading {
 gap: 4px;
 flex-direction: column;
 margin: 0 8px 8px;
}

#tab-group-suggestions-message-container {
 --button-opacity-disabled: 1;
 color: inherit;
 font-size: 0.85em;
 margin-bottom: var(--space-medium);
 & > p {
   margin-top: 0;
   padding-inline: 35px var(--space-medium);
 }
}

.tab-group-suggestions-loading-header,
#tab-group-suggestions-header {
 margin: 8px 0;
}

@keyframes tab-group-loading-block-animation {
 0% {
   background-position: 200% 0;
 }

 50% {
   background-position: 0 0;
 }

 100% {
   background-position: -200% 0;
 }
}

.tab-group-suggestions-loading-block:nth-of-type(2) {
 animation-delay: 0.1s;
}
.tab-group-suggestions-loading-block:nth-of-type(3) {
 animation-delay: 0.2s;
}
.tab-group-suggestions-loading-block:nth-of-type(4) {
 animation-delay: 0.3s;
}

.tab-group-suggestions-loading-block {
 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-size: 200% 100%;
 border-radius: var(--border-radius-small);
 height: 1.5em;
 margin: 0;
 margin-bottom: 0.5em;
 padding: 0;
 white-space: nowrap;
 width: 100%;
}