/* 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-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: 4px;
  --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-size: 2px;
  --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"] {
    --tab-overflow-pinned-tabs-width: 0px;
    padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
    min-height: var(--tabstrip-min-height);

    --tab-min-width: 76px;
    :root[uidensity="touch"] & .tabbrowser-tab:not([pinned]) {
      /* Touch mode needs additional space for the close button. */
      min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 86px);
    }

    &[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
      /* Add padding to match the shadow's blur radius so the
         shadow doesn't get clipped when either the first or
         last tab is selected */
      padding-inline: var(--tab-selected-shadow-size);
    }

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

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

#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 .15s ease-out;
  }
}

.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);

  &:not([pinned]) {
    flex: 100 100;
    max-width: 225px;
    transition: min-width 100ms ease-out,
                max-width 100ms ease-out;

    #tabbrowser-tabs[orient="horizontal"] &[fadein] {
      min-width: var(--tab-min-width-pref, var(--tab-min-width));
    }
  }

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

  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] {
    position: absolute !important;
    display: block;
  }

  #tabbrowser-tabs[movingtab] &:is(:active, [multiselected]) {
    position: relative;
    z-index: 2;
    pointer-events: none; /* avoid blocking dragover events on scroll buttons */
  }

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

  &[multiselected-move-together][multiselected]: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;

      #tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
        min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
      }
    }
  }
}

.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-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg");
      background-position: center center;
      background-size: 100% auto;
      background-repeat: no-repeat;
      animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
      -moz-context-properties: fill;
      fill: var(--tab-loading-fill);
    }

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

  &.profiles-tab {
    fill: var(--toolbar-bgcolor);
    stroke: var(--toolbar-color);
  }
}

.tab-sharing-icon-overlay,
.tab-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-audio-button {
  display: none;
  margin-inline-end: var(--tab-icon-end-margin);
  --icon-size-default: 12px;
  --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: block;
        }

        &[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);
  border-radius: var(--tab-border-radius);
  list-style-image: url(resource://content-accessible/close-12.svg);

  #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], :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: .75em;
  margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */
  opacity: .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[movingtab-createGroup] & {
    transition: background-color 50ms ease, color 50ms ease, outline-color 50ms ease;

    &[dragover-createGroup] {
      background-color: light-dark(var(--dragover-tab-group-color-pale), var(--dragover-tab-group-color));
      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-default) + 1px);

    &:-moz-locale-dir(rtl) {
      background-position-x: right calc(var(--tab-inline-padding) + var(--icon-size-default) + 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);
  }
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 12px;
}

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

/* 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. However, 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.
 */
.tab-group-line {
  display: none;
  position: absolute;
  background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));

  #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);

    .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
      inset-inline-end: 0;
      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;
    }

    .tabbrowser-tab:last-of-type > .tab-stack > .tab-background > & {
      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;
  }

  #tabbrowser-tabs[movingtab]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) > .tab-stack > .tab-background > & {
    display: flex;
    background-color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-invert));
    border-radius: 1px;
  }

  #tabbrowser-tabs:is([movingtab-createGroup],[movingtab-ungroup]) &:is([selected],[multiselected]) {
    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;

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

  #tabbrowser-tabs[orient="vertical"] &[collapsed] > .tabbrowser-tab {
    display: none;
  }
}

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

.tab-group-label-container {
  #tabbrowser-tabs[movingtab] &:active {
    position: relative;
    z-index: 2;
    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);
    }
  }

  position: relative;

  /*
   * 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]) > & {
      padding-block-end: var(--space-small);
    }
  }

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

  #tabbrowser-tabs:is([orient="horizontal"], [orient="vertical"]:not([expanded])) tab-group:not([collapsed]) > &::after {
    content: "";
    background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
    position: absolute;
  }

  #tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]) > &::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 {
    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-label {
  -moz-window-dragging: no-drag;
  text-align: center;
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: none;
  border-radius: var(--tab-border-radius);
  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;

  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;

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

      /*
       * 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);

      &::first-letter {
        font: message-box;
        font-weight: var(--font-weight-bold);
        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-margin: var(--panel-separator-margin-vertical) 0;
  font: menu;

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

  toolbarseparator {
    margin-block: var(--space-medium);
  }

  .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;
    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 Overflow */

#tabbrowser-arrowscrollbox {
  &[orient="horizontal"] {
    min-width: 1px;

    &::part(scrollbox) {
      contain: inline-size;
    }

    &:not([scrolledtostart])::part(overflow-start-indicator),
    &:not([scrolledtoend])::part(overflow-end-indicator) {
      width: 7px; /* The width is the sum of the inline margins */
      background-image: radial-gradient(ellipse at bottom,
                                        rgba(0,0,0,0.1) 0%,
                                        rgba(0,0,0,0.1) 7.6%,
                                        rgba(0,0,0,0) 87.5%);
      background-repeat: no-repeat;
      background-position: -3px;
      border-left: .5px solid rgba(255,255,255,.2);
      pointer-events: none;
      position: relative;
      border-bottom: .5px solid transparent;
    }

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

    &:not([scrolledtoend])::part(overflow-end-indicator) {
      margin-inline: -6.5px -.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, .05), rgba(255, 255, 255, .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;
    }
  }

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

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

  /* Scroll arrows */

  &::part(scrollbutton-up),
  &::part(scrollbutton-down) {
    appearance: none;
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: calc(var(--tab-border-radius) + 4px);
    fill: var(--toolbarbutton-icon-fill);
    margin: 0;
    padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px);
  }

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

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

  &:not([scrolledtostart])::part(scrollbutton-up):hover,
  &:not([scrolledtoend])::part(scrollbutton-down):hover {
    background-color: var(--toolbarbutton-hover-background);
    color: inherit;
  }

  &:not([scrolledtostart])::part(scrollbutton-up):hover:active,
  &:not([scrolledtoend])::part(scrollbutton-down):hover:active {
    background-color: var(--toolbarbutton-active-background);
    color: inherit;
  }
}

/* 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(--border-radius-medium);
  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;
  }
}

#vertical-pinned-tabs-container {
  /* 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;
  }

  &:not([scrolledtostart])::part(overflow-start-indicator),
  &:not([scrolledtoend])::part(overflow-end-indicator) {
    background-image: linear-gradient(
      to top,
      transparent 0%,
      light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05))
    );
    background-repeat: no-repeat;
    pointer-events: none;
    position: relative;
    height: 16px;
    z-index: 1;
  }

  &::part(overflow-start-indicator) {
    margin-block: 0 -16px;
  }

  &::part(overflow-end-indicator) {
    transform: scaleY(-1);
    margin-block: -16px 0;
  }

  .tab-background {
    border-radius: var(--border-radius-medium);

    .tabbrowser-tab:not(:hover) > .tab-stack > &: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-default)) / 2);
    /* stylelint-disable-next-line media-query-no-invalid */
    @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
      /* We need these rules to apply at all times when the sidebar.visibility
      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;

  #vertical-pinned-tabs-container:empty + & {
    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-default)) / 2);

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

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

  .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;
    border-radius: var(--border-radius-medium);
    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: 12px;
  margin-inline-start: -12px;
  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);
}

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem) ~ #tabbrowser-tabs,
:root[privatebrowsingmode] :is(
  toolbarbutton:not(#firefox-view-button),
  toolbarpaletteitem:not(#wrapper-firefox-view-button)
) ~ #tabbrowser-tabs {
  border-inline-start: var(--tabstrip-inner-border);
  padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
  margin-inline-start: 2px;
}

:root[privatebrowsingmode] :is(#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: 12px;
    min-height: 12px;
  }
}

/* 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: 12px;
  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-bold);
  }

  > 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;
  }
}

.menu-iconic.tab-group-icon,
.menuitem-iconic.tab-group-icon,
.subviewbutton-iconic.tab-group-icon {
  list-style-image: 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));
}

.menu-iconic.tab-group-icon-collapsed,
.menuitem-iconic.tab-group-icon-collapsed,
.subviewbutton-iconic.tab-group-icon-collapsed {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-group-chicklet.svg");
  -moz-context-properties: fill, stroke;
  fill: light-dark(var(--tab-group-color-pale), var(--tab-group-color));
  stroke: light-dark(var(--tab-group-color), var(--tab-group-color-pale));
}

.menu-iconic.tab-group-icon-closed,
.menuitem-iconic.tab-group-icon-closed,
.subviewbutton-iconic.tab-group-icon-closed {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-group-chicklet.svg");
  -moz-context-properties: fill, stroke;
  fill: transparent;
  stroke: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
}

.tab-group-suggestion-label {
  --text-color-disabled: var(--panel-color);
  --button-opacity-disabled: 1;
}

#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(--color-accent-primary);
  color: var(--color-accent-primary);
  width: 100%;

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

#tab-group-suggestions {
  margin-inline-start: 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%;
}