Quelle  browser-shared.css   Sprache: unbekannt

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

@import url("chrome://global/skin/design-system/toolbar.css");
@import url("chrome://browser/skin/browser-colors.css");
@import url("chrome://browser/skin/addons/extension-controlled.css");
@import url("chrome://browser/skin/addons/unified-extensions.css");
@import url("chrome://browser/skin/downloads/indicator.css");
@import url("chrome://browser/skin/tabbrowser/content-area.css");
@import url("chrome://browser/skin/tabbrowser/ctrlTab.css");
@import url("chrome://browser/skin/tabbrowser/fullscreen-and-pointerlock.css");
@import url("chrome://browser/skin/tabbrowser/tab.tokens.css");
@import url("chrome://browser/skin/tabbrowser/tabs-navbar.tokens.css");
@import url("chrome://browser/skin/tabbrowser/tabs.css");
@import url("chrome://browser/skin/tabbrowser/tab-groups-list.css");
@import url("chrome://browser/skin/tabbrowser/tab-hover-preview.css");
@import url("chrome://browser/skin/toolbarbuttons.css");
@import url("chrome://browser/skin/toolbarbutton-icons.css");
@import url("chrome://browser/skin/menupanel.css");
@import url("chrome://browser/skin/urlbar/tokens.css");
@import url("chrome://browser/skin/urlbar/variables.css");
@import url("chrome://browser/skin/urlbar/view.css");
@import url("chrome://browser/skin/urlbar-searchbar.css");
@import url("chrome://browser/skin/identity-block/identity-block.css");
@import url("chrome://browser/skin/notification-icons.css");
@import url("chrome://browser/skin/addon-notification.css");
@import url("chrome://browser/skin/identity-credential-notification.css");
@import url("chrome://browser/skin/autocomplete.css");
@import url("chrome://browser/skin/places/editBookmarkPanel.css");
@import url("chrome://browser/skin/searchbar.css");
@import url("chrome://browser/skin/sidebar.css");
@import url("chrome://browser/skin/aiWindowSidebar.css");
@import url("chrome://browser/skin/customizableui/customizeMode.css");
@import url("chrome://browser/skin/UITour.css");
@import url("chrome://browser/skin/formautofill-notification.css");

:root,
body {
  height: 100%;
  width: 100%;
  overflow: clip;
}

:root {
  --window-min-width: 500px;
  /* Vertical tabs need extra room in the nav bar for window controls,
     drag space, and the sidebar button. */
  --window-min-width-increase-for-vertical-tabs: calc(var(--window-controls-size) + 23px);
  --window-controls-size: 138px;
  @media (-moz-platform: macos) {
    --window-controls-size: 76px;
  }
  @media (-moz-platform: linux) {
    /* FIXME: Use --titlebar-button-* variables to calculate the window
              controls' size. */
    --window-controls-size: 115px;
  }

  user-select: none;
  color-scheme: light dark;
  text-rendering: optimizeLegibility;
  /* Minimum sizing comes from specific size requirements and adds on other
   * values for different scenarios that don't lend themselves to design tokens. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-height: 95px;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: 95px;

  @media not (forced-colors) {
    accent-color: var(--color-accent-primary);
  }

  &:-moz-locale-dir(rtl) {
    direction: rtl;
  }

  &:not([chromehidden~="toolbar"]) {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-width: var(--window-min-width);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-height: 120px;

    @media -moz-pref("sidebar.verticalTabs") {
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs));

      /* If the Content Analysis icon is showing, we don't
         want to collapse it, so make a little more room. */
      &[contentanalysisactive] {
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs) + 36px);
      }
    }
  }

  &[taskbartab]:not([chromehidden~="toolbar"]) {
    /* This size prevents toolbar contents from overlapping or overflowing. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-width: 804px;
  }

  /* z-indices that fight on the browser stack */
  --browser-stack-z-index-devtools-splitter: 1;
  --browser-stack-z-index-dialog-stack: 2;
  --browser-stack-z-index-rdm-toolbar: 3;
  --browser-stack-z-index-screenshots-panel: 4;

  /* z-indices that fight in the general browser / toolbox area */
  --browser-area-z-index-toolbox: 0;
  --browser-area-z-index-sidebar: 1;
  --browser-area-z-index-tabbox: 2;
  --browser-area-z-index-sidebar-expand-on-hover: 4;
  --browser-area-z-index-sidebar-splitter: 3;

  /* on macOS the animation of the toolbox in fullscreen needs the toolbox to be higher */
  --browser-area-z-index-toolbox-while-animating: 4;

  --lwt-additional-images: none;
  --lwt-background-tiling: no-repeat;
  --lwt-background-alignment: right top;
  --lwt-background-size: auto;

  --toolbox-background-image: none;
  --toolbox-background-repeat: no-repeat;
  --toolbox-background-position: right top;
  --toolbox-background-size: auto;

  @media -moz-pref("browser.nova.enabled") {
    --toolbox-background-image: var(--toolbox-background-gradient);
  }

  &[lwtheme] {
    --toolbox-background-image: var(--lwt-additional-images);
    --toolbox-background-repeat: var(--lwt-background-tiling);
    --toolbox-background-position: var(--lwt-background-alignment);
    --toolbox-background-size: var(--lwt-background-size);
  }

  &[lwtheme-image] {
    /* When a theme defines both theme_frame and additional_backgrounds, show
       the latter atop the former. */
    --toolbox-background-image: var(--lwt-header-image), var(--lwt-additional-images);
    --toolbox-background-repeat: no-repeat, var(--lwt-background-tiling);
    --toolbox-background-position: right top, var(--lwt-background-alignment);
    --toolbox-background-size: auto, var(--lwt-background-size);
  }

  --ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67);

  --inactive-window-transition: 0.2s ease;
  --inactive-titlebar-opacity: var(--opacity-deemphasized-strong);
  /**
   * On macOS and Linux, fading the whole titlebar is the native behavior.
   *
   * On Windows there's no particular standard, but the default .6 opacity
   * feels like too much, specially because Windows "fades" the titlebar of
   * unresponsive applications. Fade substantially less the titlebar on windows
   * to account for this platform difference.
   */
  @media (-moz-platform: windows) {
    --inactive-titlebar-opacity: 0.75;
  }
  @media (prefers-reduced-motion) {
    --inactive-window-transition: 0s;
  }

  &[lwtheme] {
    /* Theme colors don't need to use design tokens. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    color: var(--lwt-text-color);
  }

  @media -moz-pref("browser.nova.enabled") {
    --chrome-window-gap: 4px;
    --chrome-block-radius: 10px;

    @media (-moz-platform: linux) {
      --chrome-block-radius: env(-moz-gtk-csd-titlebar-radius);
    }

    @media (-moz-platform: windows) {
      --chrome-block-radius: 4px;
    }

    @media (-moz-windows-mica) {
      --chrome-block-radius: 8px;
    }

    @media (-moz-mac-tahoe-theme) {
      --chrome-block-radius: 16px;
    }
  }
}

body {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
}

/* Toolbox and Toolbars */

#navigator-toolbox {
  appearance: none;
  z-index: var(--browser-area-z-index-toolbox);

  &[fullscreenShouldAnimate] {
    transition: 0.8s margin-top ease-out;
  }

  /* While we are animating / have animated in the titlebar from macOS,
   * the z-indices are subtly different to accommodate the sidebar better.
   *
   * We also give the toolbox a shadow and border in this case.
   */
  &.fullscreen-floating-toolbox {
    /* We want to guarantee an opaque background here */
    background-color: ActiveCaption;
    background-image: var(--toolbox-background-image), image(var(--toolbox-background-color));
    background-repeat: var(--toolbox-background-repeat), no-repeat;
    background-position:
      var(--toolbox-background-position),
      top right;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-size: var(--toolbox-background-size), auto;
    z-index: var(--browser-area-z-index-toolbox-while-animating);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    box-shadow: var(--content-area-shadow);
    /* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border-bottom-color: var(--chrome-content-separator-color);
  }
}

body {
  /* Prevents the background from propagating to the viewport */
  contain: paint;
  position: relative;

  background-color: var(--toolbox-background-color);
  color: var(--toolbox-text-color);

  will-change: background-color;
  transition: background-color var(--inactive-window-transition);

  &:-moz-window-inactive {
    background-color: var(--toolbox-background-color-inactive);
    color: var(--toolbox-text-color-inactive);
  }

  :root[customizing] & {
    border-bottom-style: none;
  }

  @media (-moz-platform: macos) and (-moz-native-theme) {
    /* This is conceptually a background, but putting this on a pseudo-element
     * avoids it from suppressing the chrome-content separator border, etc.
     *
     * We make this exist unconditionally to prevent dynamic changes from
     * reframing the whole toolbox when adding or removing it.
     *
     * See bug 1949528 and bug 1476281 (which would make this unnecessary). */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    /* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a
     * native titlebar outside of the window (revealed on hover) anyways. */
    :root[customtitlebar]:not([lwtheme], [macOSNativeFullscreen]) & {
      background-color: transparent;

      &::after {
        -moz-default-appearance: -moz-window-titlebar;
        appearance: auto;
      }
    }
  }
}

:root:not([theme-image-in-toolbox]) body,
:root[theme-image-in-toolbox] #navigator-toolbox {
  background-image: var(--toolbox-background-image);
  background-repeat: var(--toolbox-background-repeat);
  background-position: var(--toolbox-background-position);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  background-size: var(--toolbox-background-size);
}

@media -moz-pref("browser.nova.enabled") {
  :root[lwtheme]:not([theme-image-in-toolbox]) #navigator-toolbox {
    color: inherit;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
  }

  .chrome-block {
    background-color: var(--toolbox-background-color);
    color: var(--toolbox-text-color);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border-radius: var(--chrome-block-radius);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border: 1px solid var(--chrome-content-separator-color);
    overflow: clip;

    &:-moz-window-inactive {
      background-color: var(--toolbox-background-color-inactive);
      color: var(--toolbox-text-color-inactive);
    }
  }

  #navigator-toolbox,
  #sidebar-container {
    background-color: var(--toolbar-background-color);
  }
}

.browser-toolbar {
  appearance: none;
  /* Reset linux padding */
  padding: 0;
  border-style: none;
  background-color: transparent;
  color: inherit;

  @media not -moz-pref("sidebar.verticalTabs") {
    &:not(.browser-titlebar) {
      background-color: var(--toolbar-background-color);
      color: var(--toolbar-text-color);
    }
  }
}

/* Title bar */

.browser-titlebar {
  -moz-window-dragging: drag;

  :root[customtitlebar] &,
  :root[customtitlebar] & .urlbar:popover-open {
    will-change: opacity;
    transition: opacity var(--inactive-window-transition);

    &:-moz-window-inactive {
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
      opacity: var(--inactive-titlebar-opacity);
    }
  }
}

.titlebar-buttonbox-container {
  order: 1000;

  @media (-moz-platform: macos) and (not (-moz-mac-rtl)) {
    &:-moz-locale-dir(ltr) {
      order: -1;
    }
  }

  @media (-moz-mac-rtl) {
    &:-moz-locale-dir(rtl) {
      order: -1;
    }
  }

  #toolbar-menubar[autohide]:not([inactive]) ~ :is(#TabsToolbar, #nav-bar) > & {
    visibility: hidden;
  }

  :root:not([customtitlebar], [inFullscreen]) & {
    display: none;
  }
}

.titlebar-spacer {
  /* Spacer widths are specific and shouldn't change if underlying token sizes change. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: 40px;

  :root[inFullscreen] &,
  :root:not([customtitlebar]) & {
    display: none;
  }

  @media (-moz-platform: windows) {
    :root:not([sizemode="normal"]) &[type="pre-tabs"] {
      display: none;
    }
  }

  @media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) {
    :root:not([sizemode="normal"]) &[type="pre-tabs"],
    :root[gtktiledwindow] &[type="pre-tabs"] {
      display: none;
    }
  }

  @media (-moz-gtk-csd-reversed-placement) {
    :root:not([sizemode="normal"]) &[type="post-tabs"],
    :root[gtktiledwindow] &[type="post-tabs"] {
      display: none;
    }
  }

  @media (max-width: 500px) {
    &[type="post-tabs"] {
      display: none;
    }
  }

  @media -moz-pref("sidebar.verticalTabs") {
    :root:not([taskbartab]) &:is([type="pre-tabs"], [type="post-tabs"]) {
      display: none;
    }
  }
}

/* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown.
 * (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or
 * popup window.) */
:root:not([chromehidden~="menubar"], [inFullscreen])
  #toolbar-menubar:not([autohide], [collapsed])
  ~ :is(#TabsToolbar, #nav-bar)
  > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
  display: none;
}

/* Only show the titlebar buttons and spacers in the first visible toolbar. */
#navigator-toolbox:not([tabs-hidden]) > #nav-bar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
  display: none;
}

:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore,
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max {
  display: none;
}

.titlebar-buttonbox {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-box;
  position: relative;

  :root:not([customtitlebar], [sizemode="fullscreen"]) & {
    display: none;
  }
}

/* Menu bar */

#toolbar-menubar {
  &[autohide] {
    overflow: hidden;

    /* For linux and windows, when temporarily showing the menu bar, make it at least
       as tall as the tab toolbar such that the window controls don't appear to move up.
       For MacOS, autohide is never true on the menubar.
    */
    :root[customtitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
      /* --tabstrip-min-height is defined in tabs.css, which stylelint doesn't know about. */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      min-height: var(--tabstrip-min-height);
    }
    /* adjust the height of the auto-hiding toolbar menubar when the tabstrip is
       hidden and we need to match the height of the nav-bar. */
    :root[customtitlebar] #navigator-toolbox[tabs-hidden] > & {
      /* urlbar variables will be tokenized, see bug 2017983 */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      min-height: calc(var(--urlbar-min-height) + 2 * var(--urlbar-padding-block));
    }

    &[inactive]:not([customizing]) {
      min-height: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      appearance: none !important;
    }
  }
}

/* Hide menu elements intended for keyboard access support */
#main-menubar[openedwithkey="false"] .show-only-for-keyboard {
  display: none;
}

/* Profiles menu */

#menu_newProfile {
  --menuitem-icon: url(chrome://global/skin/icons/plus.svg);
}

.menuitem-iconic-profile {
  --menuitem-icon-fill: var(--menu-profiles-theme-bg);
  -moz-context-properties: fill, stroke;
  /* Theme variables don't need to use design system colors. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  stroke: var(--menu-profiles-theme-fg);
}

/* Navigation toolbar */

#nav-bar {
  /* The toolbar buttons that animate use position:absolute and require a
   * positioned #nav-bar. */
  position: relative;
  /* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  border-top: 0.01px var(--tabs-navbar-separator-style) var(--tabs-navbar-separator-color);

  #navigator-toolbox[tabs-hidden] > & {
    border-top-style: none;
  }

  :root[sessionrestored][lwtheme] & {
    transition: var(--ext-theme-background-transition);
  }
}

#nav-bar-customization-target {
  /* Don't grow if potentially-user-sized elements (like the searchbar or the
   * bookmarks toolbar item list) are too wide. This forces them to flex to the
   * available space as much as possible, see bug 1795260. */
  min-width: 0;

  /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
  > :is(toolbarbutton, toolbaritem):first-child,
  > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: var(--toolbar-padding-inline);
  }
}

#vertical-spacer {
  /* Spacer widths are specific and shouldn't change if underlying token sizes change. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: 20px;

  @media not -moz-pref("sidebar.verticalTabs") {
    display: none;
  }

  :root[taskbartab] & {
    display: none;
  }
}

/* Share Button */
.share-more-button {
  --menuitem-icon: url("chrome://global/skin/icons/more.svg");
}

/* Bookmarks toolbar */

#PersonalToolbar {
  /* Make the toolbar not take any vertical space when it's empty, before
     bookmarks load. Otherwise, showing the toolbar might resize the content
     area twice. */
  min-height: 0;
  padding-inline: var(--space-small);

  @media -moz-pref("browser.nova.enabled") {
    :root:not([lwtheme]) & {
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      border-top: 1px solid var(--chrome-content-separator-color);
      background-color: var(--toolbar-background-color);
      color: var(--toolbar-text-color);
    }
  }

  :root[uidensity="compact"] & {
    padding-inline: var(--space-xxsmall);
  }

  /* Vertical sliding animation */

  overflow: clip;
  max-height: 4em;

  :root[sessionrestored] &:not(.instant) {
    transition:
      min-height 170ms ease-out,
      max-height 170ms ease-out,
      var(--ext-theme-background-transition);

    &[collapsed] {
      transition:
        min-height 170ms ease-out,
        max-height 170ms ease-out,
        visibility 170ms linear;
    }
  }

  &[collapsed] {
    max-height: 0;

    &.instant {
      visibility: collapse;
    }
  }

  /* Bookmarks toolbar empty message */

  /* If the toolbar is not initialized set a zero width, but retain height. */
  &:not([collapsed], [initialized]) > #personal-toolbar-empty {
    visibility: hidden;
    width: 0;
    overflow-x: hidden;
  }

  /* Bookmarks toolbar in customize mode */

  &[customizing] {
    outline: 1px dashed;
    outline-offset: -3px;
    /* Give the toolbar the correct height when there's no items in it */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-height: 22px;
  }
}

#personal-toolbar-empty-description {
  white-space: nowrap;
}

#personal-bookmarks {
  position: relative;
  -moz-window-dragging: inherit;
}

#fxms-bmb-button-wrapper,
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar {
  display: none;
}

/* Bookmarks toolbar drop indicator */

#PlacesToolbarDropIndicatorHolder {
  display: block;
  position: absolute;
}

#PlacesToolbarDropIndicator {
  list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
  pointer-events: none;
}

#notifications-toolbar {
  min-height: 0;
  flex-direction: column;
}

.bookmark-item[cutting] {
  > .toolbarbutton-icon,
  > .menu-icon {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
    opacity: 0.5;
  }

  > .toolbarbutton-text,
  > .menu-text {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
    opacity: 0.7;
  }
}

/* Menupopup drop indicators */

menupopup::part(drop-indicator-container) {
  /* TODO(emilio): When menupopups get ported to modern flex layout we can
   * probably simplify this substantially, by making the indicator position:
   * absolute or so (which was never properly supported in XUL). The container
   * should become completely unnecessary then. */
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

menupopup::part(drop-indicator-bar) {
  position: relative;
  /* these two margins must together compensate the indicator's height */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  margin-block: -1px;
}

menupopup::part(drop-indicator) {
  list-style-image: none;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: 2px;
  margin-inline-end: -4em;
  background-color: AccentColor;
  pointer-events: none;
}

/* Back / Forward buttons context menu */

.unified-nav-current {
  font-weight: var(--font-weight-semibold);
}

.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
  --menuitem-icon: url("chrome://browser/skin/back.svg") !important;
}

.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
  --menuitem-icon: url("chrome://browser/skin/forward.svg") !important;
}

/* Find bar */

.browserContainer > findbar {
  background-color: var(--toolbar-background-color);
  color: var(--toolbar-text-color);
  color-scheme: var(--toolbar-color-scheme);
  /* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  border-top-color: var(--chrome-content-separator-color);

  :root[lwtheme] & {
    background-color: var(--lwt-accent-color); /* Known opaque */
    background-image: image(var(--toolbar-background-color)), var(--toolbox-background-image);
    background-repeat: no-repeat, var(--toolbox-background-repeat);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-position:
      top left,
      var(--toolbox-background-position);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-size: auto, var(--toolbox-background-size);
    background-position-y: bottom !important;
  }

  :root[lwtheme]:not([lwtheme-image]) &:-moz-window-inactive {
    background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
  }
}

/* Private browsing indicator */

.private-browsing-indicator-with-label {
  align-items: center;
  margin-inline: var(--space-small);

  :root:not([privatebrowsingmode="temporary"]) &,
  #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
    display: none;
  }

  #navigator-toolbox[tabs-hidden] #nav-bar > & {
    margin-inline-end: var(--space-medium);

    /* Hide the private browsing indicator
    label when vertical tabs are enabled */
    > .private-browsing-indicator-label {
      display: none;
    }
  }
}

.private-browsing-indicator-icon {
  list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Content analysis indicator */
.content-analysis-indicator {
  :root:not([contentanalysisactive]) &,
  #navigator-toolbox:not([tabs-hidden]) > #nav-bar > & {
    display: none;
  }
}

/* Various panels and popup notifications */

.screenshotsPagePanel {
  position: relative;
  max-height: 0;
  z-index: var(--browser-stack-z-index-screenshots-panel); /* Above the web content in this stack. */
}

/* Override theme colors since the picker uses extra colors that
   themes cannot set */
#DateTimePickerPanel {
  color-scheme: env(-moz-content-preferred-color-scheme);
  --panel-background-color: Field;
  --panel-text-color: FieldText;
}

#widget-overflow .webextension-popup-browser {
  background: white;

  /* height set via JS can be lower than the stack min-height,
     ensure the browser takes up at least that min-height */
  min-height: 100%;
}

#addon-progress-notification-progressmeter {
  margin: var(--space-xxsmall) var(--space-xsmall);
}

#invalid-form-popup {
  white-space: pre-wrap;
  word-break: break-word;
  unicode-bidi: plaintext;

  > description {
    max-width: var(--size-layout-medium);
  }
}

.popup-notification-invalid-input {
  /* Design system box shadows are all neutral tones, the red box shadows can
   * remain until/unless there's some redesign work. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  box-shadow: 0 0 1.5px 1px red;

  &[focused] {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4);
  }
}

.popup-notification-description[popupid="webauthn-prompt-register-direct"] {
  white-space: pre-line;
}

#sidebar-tools-overflow {
  margin-inline: var(--space-large);
  width: 17.5em;

  #tools-overflow-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xsmall);
    padding: var(--space-xsmall);
    width: 100%;

    .expanded-button {
      width: 100%;

      &::part(button) {
        font-size: var(--font-size-large);
        font-weight: normal;
        justify-content: flex-start;
        /* Calculating padding from other dimensions rather than using a token with no context. */
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        padding-inline: calc((var(--button-size-icon) - var(--icon-size)) / 2 - var(--border-width));
      }

      &::part(moz-button-label) {
        opacity: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

/* Contextual Feature Recommendation popup-notification */

#cfr-notification-header {
  width: 100%;
  display: block;
  text-align: center;
  box-shadow: var(--box-shadow-level-1);
}

#cfr-notification-header-stack {
  width: 100%;
}

#cfr-notification-header-label {
  margin: var(--space-small);
  font-weight: var(--font-weight-semibold);
}

#cfr-notification-header-link {
  margin: var(--space-small);
  color: inherit;
  cursor: default;
  justify-self: end;
}

#cfr-notification-header-image {
  width: var(--icon-size-medium);
  height: var(--icon-size-medium);
  padding: var(--space-xxsmall);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--opacity-deemphasized-strong);
  list-style-image: url(chrome://global/skin/icons/help.svg);

  &:hover {
    --header-image-background-color: oklch(from var(--color-gray-50) l c h / 20%);

    background-color: var(--header-image-background-color);
    border-radius: var(--border-radius-xsmall);
  }
}

#contextual-feature-recommendation-notification {
  width: var(--size-layout-large);

  .popup-notification-icon {
    margin-inline-end: var(--space-xsmall);
  }

  .cfr-doorhanger-large-icon {
    width: var(--size-image-large);
    height: var(--size-image-large);
    margin-inline-end: var(--space-medium);
  }

  .cfr-doorhanger-medium-icon {
    width: var(--size-image-small);
    height: var(--size-image-small);
    margin-inline-end: var(--space-medium);
  }

  .popup-notification-body-container {
    width: 100%;
    padding-bottom: var(--space-xxsmall);
  }

  popupnotificationcontent {
    margin-top: 0;
  }

  description {
    margin-bottom: 0;
  }

  &[data-notification-bucket="CFR_MILESTONE_MESSAGE"] {
    &:not([hidden]) {
      display: flex;
      flex-direction: row;
      align-items: center;
      background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background));
      width: unset;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      max-width: 700px;
      overflow-wrap: break-word;
      padding: var(--space-xsmall);
    }

    &:-moz-locale-dir(rtl) {
      background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background));
    }

    .popup-notification-body-container,
    .popup-notification-footer-container,
    #cfr-notification-header-link {
      display: none;
    }

    #cfr-notification-header {
      box-shadow: none;
    }

    description {
      font-weight: normal;
      margin: unset;
      margin-inline: var(--space-medium);
    }

    .panel-footer,
    .popup-notification-header-container {
      display: inline-flex;
    }

    .panel-footer {
      float: inline-end;
      background-color: transparent;
      flex-direction: row-reverse;
      /* Override doorhanger default styles that increase the size of the button */
      margin: 0;
    }

    .popup-notification-primary-button {
      --popup-button-background-color: oklch(from var(--color-gray-20) l c h / 20%);

      background-color: var(--popup-button-background-color);
      color: white;
      border: none;
      border-radius: var(--border-radius-xsmall);
      margin: var(--space-xsmall);
      padding: var(--space-xsmall) var(--space-medium);
      flex: 1;
      min-height: var(--size-item-medium);

      &::after {
        content: url(chrome://global/skin/icons/arrow-left-12.svg);
        -moz-context-properties: fill;
        fill: currentColor;
        transform: translateY(2px);
        float: inline-end;
      }

      &:-moz-locale-dir(ltr)::after {
        content: url(chrome://global/skin/icons/arrow-right-12.svg);
      }

      &:hover {
        --popup-button-background-color: oklch(from var(--color-gray-20) l c h / 40%);
      }

      &:hover:active {
        --popup-button-background-color: oklch(from var(--color-gray-20) l c h / 50%);
      }
    }

    .popup-notification-secondary-button {
      --popup-button-background-color: transparent;

      margin: var(--space-xsmall);
      border: none;
      border-radius: var(--border-radius-xsmall);
      background-image: url(chrome://global/skin/icons/close.svg);
      background-color: var(--popup-button-background-color);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
      -moz-context-properties: fill;
      fill: white;
      min-height: var(--size-item-medium);
      width: var(--size-item-medium);
      padding: 0;
      align-self: center;
      flex: none;

      &:hover {
        --popup-button-background-color: oklch(from var(--color-gray-20) l c h / 40%);
      }
    }

    .popup-notification-header-container {
      color: white;
      max-width: unset;
    }
  }

  &[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
    /* TODO: determine whether this is still needed, see bug 2032531 */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    width: 386px;
  }

  &[data-notification-category="addon_recommendation"] {
    .popup-notification-description > b {
      padding-inline-start: var(--space-xsmall);
    }

    #cfr-notification-footer-learn-more-link {
      margin-inline-start: var(--space-xsmall);
    }

    #cfr-notification-feature-steps,
    #cfr-notification-header-image {
      display: none;
    }

    #cfr-notification-header-label {
      margin-block-end: var(--space-small);
    }
  }

  &[data-notification-category="icon_and_message"] {
    /*
     * `icon_and_message` CFR doorhanger with: icon, title and subtitle.
     * No panel header is shown
     */
    #cfr-notification-header,
    .popup-notification-footer-container {
      display: none;
    }

    .popup-notification-description {
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-large);
    }

    popupnotificationcontent {
      display: block; /* This forces the subtitle content to wrap */
    }
  }
}

#cfr-notification-footer-text-and-addon-info {
  display: block;
  /* Panel variables will be tokenized in bug 2017979 */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  padding: var(--space-small) var(--panel-padding);
}

#cfr-notification-feature-steps {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-small);

  li {
    margin-inline-start: var(--space-small);
    position: relative;
    display: list-item;

    &:not(:last-child) {
      margin-bottom: var(--space-xsmall);
    }
  }
}

#cfr-notification-footer-text,
#cfr-notification-footer-users,
#cfr-notification-footer-learn-more-link {
  margin: 0;
}

#cfr-notification-footer-addon-info {
  align-items: center;
  display: flex;
  margin-block: var(--space-medium) var(--space-small);
}

#cfr-notification-footer-filled-stars,
#cfr-notification-footer-empty-stars {
  -moz-context-properties: fill, fill-opacity;
  background-image: url(chrome://browser/skin/bookmark.svg);
  fill: currentColor;
  fill-opacity: 0.7;
  height: var(--size-item-small);
}

#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl),
#cfr-notification-footer-empty-stars {
  background-position-x: right;
}

#cfr-notification-footer-filled-stars,
#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) {
  background-position-x: left;
}

#cfr-notification-footer-empty-stars[tooltiptext] {
  margin-inline-end: var(--space-small);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
  opacity: 0.3;
}

#cfr-notification-footer-users {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
  opacity: 0.7;
}

#cfr-notification-footer-spacer {
  flex-grow: 1;
}

/* Sharing tabs warning */

#sharing-tabs-warning-panel {
  max-width: var(--size-layout-large);

  > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header {
    display: none;
  }

  > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header {
    display: none;
  }
}

#sharing-warning-proceed-to-tab {
  --sharing-warning-background-color: var(--color-blue-70);

  appearance: none;
  border-style: none;
  margin: 0;
  background-color: var(--sharing-warning-background-color);
  color: white;
  border-radius: var(--border-radius-small);
  padding: var(--space-small);
  margin-top: var(--space-large);
  margin-bottom: var(--space-small);

  &:hover {
    --sharing-warning-background-color: var(--color-blue-80);
  }
}

/* webRTC device sharing selector */

.webRTC-selectDevice-selector-container {
  display: flex;
  align-items: center;

  > menulist {
    flex: 1;
    min-width: 0;
  }
}

#webRTC-selectSpeaker-richlistbox {
  flex: 1;
  /* Keep the richlistbox small enough that a large number of devices doesn't
     push the main and secondary action buttons off the bottom of the
     popupnotification window when limited by screen size.  Only enough
     richlistitems need to be shown to indicate that there are options
     available but give enough space for the common case of only a few
     devices.  */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  max-height: 600px;
}

#webRTC-selectCamera-label,
#webRTC-selectMicrophone-label {
  display: none;
}

.webRTC-selectDevice-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline-end: var(--space-small);
  /* Setting width explicitly so it's still visible if the device label is very long */
  width: var(--icon-size);
}

#webRTC-selectCamera-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
}

#webRTC-selectMicrophone-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
}

#webRTC-selectSpeaker-icon {
  list-style-image: url("chrome://browser/skin/notification-icons/speaker.svg");
}

/* TODO: move these to popupnotification.css */

popupnotificationcontent {
  margin-block-start: var(--space-small);
}

.popup-notification-body menulist {
  margin: 0;
}

.popup-notification-checkbox {
  margin-block: var(--space-medium) 0;
}

.popup-notification-body-container {
  padding-block-end: 0;
}

.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) {
  margin-inline: 0;
}

.popup-notification-description {
  font-weight: var(--font-weight-semibold);
  margin-top: 0;

  > b {
    font-weight: inherit;
  }
}

/* Password Manager Doorhanger */

.ac-dropmarker {
  appearance: none;
  justify-self: end;
  margin-inline-end: var(--space-small);
  align-self: center;
  content: url(chrome://global/skin/icons/arrow-down-12.svg);
  -moz-context-properties: fill;
  /* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  fill: var(--input-text-color);
}

#tab-notification-deck {
  display: block;
}

/* Relay Integration */

.relay-integration-header {
  display: flex;
  align-items: center;
  /* Font-size tokens are unset in platform contexts. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 2em;

  > div:nth-of-type(1) {
    width: var(--icon-size-xlarge);
    height: var(--icon-size-xlarge);
    background-image: url("chrome://browser/content/logos/relay.svg");
    background-repeat: no-repeat;
  }

  > div:nth-of-type(2) {
    direction: ltr;
    margin-inline: var(--space-small);

    > span:first-of-type {
      font-weight: var(--font-weight-bold);
    }

    > span:last-of-type {
      font-weight: normal;
    }
  }
}

.relay-integration-header-variation {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-heading);
  /* Font-size tokens are unset in platform contexts. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 1.5em;
  margin: auto;

  > p {
    margin-block: auto;
  }
}

.popup-notification-description[popupid="relay-integration-offer-notification"] > div:first-of-type {
  font-weight: normal;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

#relay-integration-reuse-masks-notification > popupnotificationcontent > div {
  font-weight: normal;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

.reusable-relay-masks {
  display: flex;
  flex-direction: column;

  > button {
    padding: var(--space-xsmall);
    margin: var(--space-xsmall);
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    > span:first-child {
      margin-inline-end: var(--space-xlarge);
    }

    > span:last-child {
      opacity: var(--opacity-deemphasized-strong);
    }
  }
}

@media -moz-pref("browser.nova.enabled") {
  .reusable-relay-masks {
    gap: var(--space-small);

    > button {
      padding: var(--space-xsmall) var(--space-medium);
      margin: 0;
      align-items: center;
      min-height: var(--size-item-large);
      border-radius: var(--border-radius-circle);
      border: 1px solid var(--border-color-deemphasized);
      background-color: transparent;

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

/* History swipe navigation animation */

#historySwipeAnimationContainer {
  overflow: hidden;
  pointer-events: none;
}

#historySwipeAnimationPreviousArrow,
#historySwipeAnimationNextArrow {
  --swipe-nav-icon-primary-color: AccentColorText;
  --swipe-nav-icon-accent-color: AccentColor;

  will-change: transform;

  @media not (prefers-contrast) {
    --swipe-nav-icon-primary-color: var(--color-accent-primary);
    --swipe-nav-icon-accent-color: light-dark(white, black);
  }

  > svg {
    margin: auto 0;
  }
}

.swipe-nav-icon:-moz-locale-dir(rtl),
#historySwipeAnimationNextArrow {
  transform: scaleX(-1);
}

.swipe-nav-icon-circle,
.swipe-nav-icon-circle-outline,
.swipe-nav-icon-arrow {
  transition: fill 1s;
}

@media not (-moz-platform: macos) {
  /*
   * Styles for the swipe navigation SVG icon.
   *
   * `will-navigate` class name is added to the <svg> element when the user's
   * swipe gesture reached to the point where history navigation will be
   * triggered. It's used for triggering three animations, an arrow color change,
   * a circle color change and a glowing effect outer the circle.
   */
  .swipe-nav-icon-circle {
    fill: var(--swipe-nav-icon-accent-color);
    stroke: var(--swipe-nav-icon-primary-color);

    .will-navigate > & {
      fill: var(--swipe-nav-icon-primary-color);
    }
  }

  .swipe-nav-icon-circle-outline {
    fill: var(--swipe-nav-icon-primary-color);
    stroke: var(--swipe-nav-icon-primary-color);
    transition: opacity 1s;
    will-change: opacity; /* a workaround for bug 1804189 */
    opacity: 0;

    .will-navigate > & {
      transition-delay: 0.2s;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
      opacity: 0.2;
    }
  }

  .swipe-nav-icon-arrow {
    fill: var(--swipe-nav-icon-primary-color);

    .will-navigate > & {
      fill: var(--swipe-nav-icon-accent-color);
      stroke: var(--swipe-nav-icon-accent-color);
    }
  }
}

@media (-moz-platform: macos) {
  /*
   * Styles for the swipe navigation SVG icon.
   *
   * `will-navigate` class name is added to the <svg> element when the user's
   * swipe gesture reached to the point where history navigation will be
   * triggered.
   */
  .swipe-nav-icon-circle-outline,
  .swipe-nav-icon-arrow {
    fill: var(--swipe-nav-icon-primary-color);

    .will-navigate > & {
      fill: var(--swipe-nav-icon-accent-color);
    }
  }

  .swipe-nav-icon-circle {
    fill: var(--swipe-nav-icon-accent-color);

    .will-navigate > & {
      fill: var(--swipe-nav-icon-primary-color);
    }
  }
}

/* Picture-in-Picture panel */

#PictureInPicturePanel {
  /* Panel variables will be tokenized in bug 2017979 */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: var(--menu-panel-width-wide);
  font: caption;
}

#PictureInPicturePanelBody {
  gap: var(--space-small);
  padding: var(--space-small) var(--space-large);
}

#PictureInPicturePanelFooter {
  margin: var(--space-small) var(--space-large) var(--space-large);
}

/* AI Window Toggle Button */
#ai-window-toggle {
  list-style-image: url("chrome://branding/content/icon32.png");
  border-radius: var(--border-radius-medium);
  padding-inline-end: var(--space-small);

  /* Toggle button should only have padding-inline-end if #PanelUI-button both visible and rendered next to it */
  :root:not([aiwindow-first-run]) &:has(+ #PanelUI-button) {
    padding: 0 var(--smartwindow-ai-toggle-padding, var(--space-xsmall));
  }

  > .toolbarbutton-icon {
    padding: var(--space-small);

    @media not -moz-pref("browser.nova.enabled") {
      /* The design system does not have any inset box-shadow tokens. */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      box-shadow: 0 0 16px 4px var(--box-shadow-color-darker-layer-1) inset;
    }

    @media -moz-pref("browser.nova.enabled") {
      --smart-window-toolbarbutton-color: color-mix(in srgb, var(--color-violet-desaturated-50) 15%, transparent);
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      border: var(--border-width) solid var(--smart-window-toolbarbutton-color);
      --toolbarbutton-background-color-hover: var(--background-color-box);
      --toolbarbutton-background-color-active: var(--background-color-box);
      --toolbarbutton-outline-color: var(--smart-window-toolbarbutton-color);
    }
  }

  /* Smart Window toggle */
  :root[ai-window] & {
    list-style-image: url("chrome://browser/skin/smart-window-simplified.svg");

    @media -moz-pref("browser.nova.enabled") {
      list-style-image: url("chrome://browser/skin/smart-window-nova.svg");
    }

    > .toolbarbutton-icon {
      @media not -moz-pref("browser.nova.enabled") {
        /* Smart Window icon has additional 2px padding per side, to be slightly smaller than Classic Window icon when used in Switcher */
        padding: var(--toolbarbutton-padding-inner);
        /* The design system does not have any inset box-shadow tokens. */
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        box-shadow: 0 0 16px 4px var(--smartwindow-toggle-shadow-color) inset;
      }

      @media -moz-pref("browser.nova.enabled") {
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        box-shadow: 0 0 16px 4px var(--background-color-box) inset;
        /* The design system does not have any outline width tokens. */
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        outline-width: var(--toolbarbutton-padding-inner-compact);
        --toolbarbutton-background-color-hover: var(--background-color-box);
        --toolbarbutton-background-color-active: var(--background-color-box);
        --toolbarbutton-outline-color-hover: var(--smart-window-toolbarbutton-color);
        --toolbarbutton-outline-color-active: var(--smart-window-toolbarbutton-color);
        --toolbarbutton-outline-color-selected: var(--smart-window-toolbarbutton-color);
      }
    }
  }
}

#ai-window-switch-classic,
#ai-window-switch-ai {
  &:hover {
    background-color: var(--button-background-color-ghost-hover);
  }

  .toolbarbutton-icon {
    margin-inline-end: var(--space-small);
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
  }

  .toolbarbutton-text {
    padding-inline-start: 0;
  }

  &::after {
    content: url("chrome://global/skin/icons/check.svg");
    -moz-context-properties: fill;
    fill: currentColor;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-inline-start: auto;
  }

  @media not -moz-pref("browser.nova.enabled") {
    .ai-window-switch-description {
      display: none;
    }
  }

  @media -moz-pref("browser.nova.enabled") {
    /* TODO: replace with token when available - Bug 2033070 */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border-radius: 24px;

    &[checked] {
      background-color: var(--button-background-color-active);
    }

    #ai-window-switch-ai-badge {
      display: none;
    }

    .toolbarbutton-icon {
      width: var(--icon-size-large);
      height: var(--icon-size-large);
    }

    .toolbarbutton-text {
      padding-inline-start: var(--space-small);
      text-align: start;
    }

    .ai-window-switch-description {
      color: var(--text-color-deemphasized);
      font-size: var(--font-size-small);
    }
  }
}

#ai-window-switch-classic {
  list-style-image: url("chrome://branding/content/icon32.png");

  :root[ai-window] &::after {
    display: none;
  }
}

#ai-window-switch-ai {
  list-style-image: url("chrome://browser/skin/smart-window-simplified.svg");

  :root:not([ai-window]) &::after {
    display: none;
  }

  @media not -moz-pref("browser.nova.enabled") {
    & > .toolbarbutton-icon {
      /* Smart Window icon has additional 0.125rem padding per side, to be slightly smaller than Classic Window icon when used in Switcher */
      padding: var(--space-xxsmall);
    }

    & moz-badge {
      margin-inline-start: var(--space-medium);
    }
  }
}

#appMenu-new-ai-window-button > moz-badge {
  margin-inline-start: auto;
}

/* AI window: hide nav bar on new window or firstrun */
:root[ai-window][aiwindow-new-window],
:root[ai-window][aiwindow-first-run] {
  #nav-bar:not(.browser-titlebar) {
    height: 0;
    min-height: 0;
    visibility: hidden;
  }

  #urlbar-container,
  #nav-bar-customization-target > *:not(#sidebar-button),
  #nav-bar-overflow-button {
    visibility: hidden;
  }
}

/* Show back/forward buttons when navigating back to the Smart Window from a page */
:root[ai-window][aiwindow-new-window][aiwindow-has-nav-forward] {
  #nav-bar:not(.browser-titlebar) {
    height: unset;
    min-height: unset;
    visibility: visible;
  }

  #nav-bar-customization-target > #back-button,
  #nav-bar-customization-target > #forward-button {
    visibility: visible;
    -moz-user-focus: normal;
  }
}

/* immersive view styles exclusive for first run (nav-bar/urlbar hiding is
   shared with new-window above) */
:root[ai-window][aiwindow-first-run] {
  #sidebar-button,
  #PanelUI-button {
    display: none;
  }

  #TabsToolbar > .toolbar-items {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
    opacity: 0.2;
    pointer-events: none;
  }

  @media -moz-pref("sidebar.verticalTabs") {
    #sidebar-container {
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
      opacity: 0.2;
      pointer-events: none;
    }
  }
}

/* Bookmarks roots menu-items */

#BMB_bookmarksToolbar,
#bookmarksToolbarFolderMenu {
  --menuitem-icon: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}