path: root/browser/themes/shared/browser-shared.css

/* 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://browser/skin/downloads/indicator.css");
@import url("chrome://browser/skin/addons/extension-controlled.css");
@import url("chrome://browser/skin/addons/unified-extensions.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-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/urlbarView.css");
@import url("chrome://browser/skin/autocomplete.css");
@import url("chrome://browser/skin/places/editBookmarkPanel.css");
@import url("chrome://browser/skin/sidebar.css");
@import url("chrome://browser/skin/tabs.css");
@import url("chrome://browser/skin/fullscreen/warning.css");
@import url("chrome://browser/skin/ctrlTab.css");
@import url("chrome://browser/skin/customizableui/customizeMode.css");
@import url("chrome://browser/skin/UITour.css");
@import url("chrome://browser/skin/formautofill-notification.css");

@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  user-select: none;
  color-scheme: light dark;
  accent-color: var(--button-primary-bgcolor);

  --toolbox-non-lwt-bgcolor: -moz-headerbar;
  --toolbox-non-lwt-textcolor: -moz-headerbartext;
  --toolbox-non-lwt-bgcolor-inactive: -moz-headerbarinactive;
  --toolbox-non-lwt-textcolor-inactive: -moz-headerbarinactivetext;

  --toolbarbutton-border-radius: 4px;

  --chrome-content-separator-color: ThreeDShadow;

  --tabs-navbar-shadow-size: 1px;
  --tabs-navbar-shadow-color: ThreeDShadow;

  --panelui-subview-transition-duration: 150ms;

  --short-notification-background: #0250BB;
  --short-notification-gradient: #9059FF;

  --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent);
  --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent);
  --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent);
  --button-color: currentColor;
  --button-primary-bgcolor: AccentColor;
  --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor);
  --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor);
  --button-primary-color: AccentColorText;

  --buttons-destructive-bgcolor: #e22850;
  --buttons-destructive-hover-bgcolor: #c50042;
  --buttons-destructive-active-bgcolor: #810220;
  --buttons-destructive-color: #fbfbfe;

  --identity-box-margin-inline: 4px;
  --urlbar-box-bgcolor: var(--button-bgcolor);
  --urlbar-box-focus-bgcolor: var(--button-bgcolor);
  --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
  --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
  --urlbar-box-text-color: inherit;
  --urlbar-box-hover-text-color: var(--urlbar-box-text-color);
  --urlbar-min-height: max(32px, 1.4em);
  --urlbar-icon-fill-opacity: 0.9;
  --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2);
  /* This should be used for icons and chiclets inside the input field. It makes
     the gap around them more uniform when they are close to the field edges */
  --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);

  --pocket-icon-fill: #ef4056;

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

  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
  --inactive-window-transition: 0.2s ease;
  --inactive-titlebar-opacity: .6;
  /**
   * 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: .75;
  }

  &:where([tabsintitlebar]) {
    --toolbox-non-lwt-bgcolor: ActiveCaption;
    --toolbox-non-lwt-textcolor: CaptionText;
    --toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
    --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
  }

  &:-moz-lwtheme {
    color: var(--lwt-text-color);

    --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --chrome-content-separator-color: rgba(0,0,0,.3);
    --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));

    @media not (prefers-contrast) {
      --focus-outline-color: light-dark(#0061E0, #00DDFF);
    }
  }

  @media (prefers-contrast) {
    --urlbar-icon-fill-opacity: 1;
  }

  &[uidensity=compact] {
    --urlbar-min-height: max(26px, 1.4em);
  }

  &[uidensity=touch] {
    --urlbar-min-height: max(34px, 1.4em);
  }

  @media (prefers-color-scheme: dark) {
    /* Increase the contrast of urlbar boxes in dark mode.
       In practice these are bumped-up --button(-hover)-bgcolor rules */
    --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
    --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
    --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent);
  }

  @media (prefers-reduced-motion) {
    --inactive-window-transition: 0s;
  }

  @media (min-resolution: 1.5dppx) {
    --tabs-navbar-shadow-size: 0.5px;
  }

  @media (min-resolution: 3dppx) {
    --tabs-navbar-shadow-size: 0.33px;
  }
}

#navigator-toolbox {
  appearance: none;

  /* Toolbar / content area border */
  border-bottom: 1px solid var(--chrome-content-separator-color);

  background-color: var(--toolbox-non-lwt-bgcolor);
  color: var(--toolbox-non-lwt-textcolor);

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

  &:-moz-window-inactive {
    background-color: var(--toolbox-non-lwt-bgcolor-inactive);
    color: var(--toolbox-non-lwt-textcolor-inactive);
  }

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

  &:-moz-lwtheme {
    background-image: var(--lwt-additional-images);
    background-repeat: var(--lwt-background-tiling);
    background-position: var(--lwt-background-alignment);
    background-color: var(--lwt-accent-color);
    color: inherit;

    &:-moz-window-inactive {
      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
    }
  }

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

.browser-toolbar {
  appearance: none;
  /* Reset linux padding */
  padding: 0;

  &:not(.titlebar-color) {
    background-color: var(--toolbar-bgcolor);
    color: var(--toolbar-color);
    border-style: none;
  }
}

:root[tabsintitlebar] #titlebar {
  will-change: opacity;
  transition: opacity var(--inactive-window-transition);

  &:-moz-window-inactive {
    opacity: var(--inactive-titlebar-opacity);
  }
}

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

:root[sessionrestored] #nav-bar:-moz-lwtheme {
  transition: var(--ext-theme-background-transition);
}

#nav-bar:not([tabs-hidden="true"]) {
  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
     The animations use position:absolute and require a positioned #nav-bar. */
  position: relative;
  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color);
}

/* 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: 6px;

  :root[uidensity=compact] & {
    padding-inline: 2px;
  }

  /* 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=true] {
      transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
    }
  }

  &[collapsed=true] {
    max-height: 0;

    &.instant {
      visibility: collapse;
    }
  }

  /* Bookmarks toolbar empty message */

  &[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
    visibility: hidden;
  }

  /*
   * Make the empty bookmarks toolbar message take up no horizontal space.
   * This avoids two issues:
   * 1) drag/drop of urls/bookmarks to the toolbar not working, because they
   *    land on the personal-toolbar-empty element.
   * 2) buttons in the toolbar moving horizontally while the window opens,
   *    because the element is first shown at full width and then completely
   *    hidden.
   * TODO(emilio): The comment above was never quite true (the message did take
   * horizontal space, see bug 1812636). Figure out how much of this rule is
   * really needed.
   */
  &[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description {
    margin-inline: 0;
    min-width: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  /* Bookmarks toolbar in customize mode */

  &[customizing] {
    outline: 1px dashed;
    outline-offset: -3px;
    /* Avoid the toolbar having no height when there's no items in it */
    min-height: 22px;
  }
}

/* Bookmarks toolbar only-on-new-tab mode */

:root {
  --bookmarks-toolbar-overlapping-browser-height: max(28px, 2em);
}

:root[BookmarksToolbarOverlapsBrowser] {
  #PersonalToolbar {
    height: var(--bookmarks-toolbar-overlapping-browser-height);
  }

  #navigator-toolbox {
    /* Overlap the content area by the height of the bookmarks toolbar so that
       temporarily showing the toolbar for new tabs doesn't resize the content
       area for all tabs. */
    margin-bottom: calc(-1 * var(--bookmarks-toolbar-overlapping-browser-height));
    z-index: 1;
  }

  .newTabBrowserPanel,
  #sidebar-box {
    /* Make room for the bookmarks toolbar so that it won't visibly overlap the
       new tab page and sidebar contents. We do not put this padding on #browser
       as that would resize the content area for all tabs including background
       tabs, which is what we explicitly want to avoid doing here. */
    padding-top: var(--bookmarks-toolbar-overlapping-browser-height);
  }
}

/* Bookmarks toolbar drop indicator */

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

/* 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 */
  margin-block: -1px;
}

menupopup::part(drop-indicator) {
  list-style-image: none;
  height: 2px;
  margin-inline-end: -4em;
  background-color: SelectedItem;
  pointer-events: none;
}

/* Back / Forward context menu */

.unified-nav-back,
.unified-nav-forward {
  -moz-context-properties: fill;
  fill: currentColor;
}

.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
  list-style-image: 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) {
  list-style-image: url("chrome://browser/skin/forward.svg") !important;
}

/* Status panel */

#statuspanel {
  &:not([hidden]) {
    max-width: calc(100% - 5px);
    pointer-events: none;

    /* Take a bit more space vertically for the mouse tracker to hit us more
     * easily */
    padding-top: 2em;

    position: absolute;
    bottom: 0;
    left: 0;
  }

  &:not([mirror]):-moz-locale-dir(rtl),
  &[mirror]:-moz-locale-dir(ltr) {
    left: auto;
    right: 0;
  }

  &[sizelimit] {
    max-width: 50%;
  }

  &[type=status] {
    min-width: min(23em, 33%);
  }

  &[type=overLink] {
    transition: opacity 120ms ease-out, visibility 120ms;
  }

  &:is([type=overLink], [inactive][previoustype=overLink]) {
    direction: ltr;
  }

  &[inactive],
  :root[inDOMFullscreen] &:not([type=overLink]) {
    transition: none;
    opacity: 0;
    visibility: hidden;

    &[previoustype=overLink] {
      transition: opacity 200ms ease-out, visibility 200ms;
    }
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media (-moz-bool-pref: "browser.tabs.hideStatusPanel") {
    visibility: hidden;
  }
}

#statuspanel-label {
  color-scheme: env(-moz-content-preferred-color-scheme);
  margin: 0;
  padding: 2px 4px;
  background-color: -moz-dialog;
  border: 1px none ThreeDShadow;
  border-top-style: solid;
  color: -moz-dialogText;
  text-shadow: none;

  @media (not (prefers-contrast)) and (not (-moz-platform: linux)) {
    background-color: light-dark(#f9f9fa, hsl(240,1%,20%));
    border-color: light-dark(#ddd, hsl(240,1%,40%));
    color: light-dark(#444, rgb(249,249,250));
  }

  #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr),
  #statuspanel[mirror] > &:-moz-locale-dir(rtl) {
    border-right-style: solid;
    /* disabled on Windows for triggering grayscale AA (bug 659213): */
  	@media not (-moz-platform: windows) {
      border-top-right-radius: .3em;
    }
    margin-right: 1em;
  }

  #statuspanel:not([mirror]) > &:-moz-locale-dir(rtl),
  #statuspanel[mirror] > &:-moz-locale-dir(ltr) {
    border-left-style: solid;
    /* disabled on Windows for triggering grayscale AA (bug 659213): */
  	@media not (-moz-platform: windows) {
      border-top-left-radius: .3em;
    }
    margin-left: 1em;
  }
}

/* Find bar */

.browserContainer > findbar {
  background-color: var(--toolbar-bgcolor);
  color: var(--toolbar-color);
  color-scheme: var(--toolbar-color-scheme);
  border-top-color: var(--chrome-content-separator-color, ThreeDShadow);

  &:-moz-lwtheme {
    background-color: var(--lwt-accent-color);
    background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
    background-repeat: no-repeat, var(--lwt-background-tiling);
    background-position: right bottom, var(--lwt-background-alignment);
    background-position-y: bottom !important;

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

    :root[lwtheme-image] & {
      background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
      background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
      background-position: center, right bottom, var(--lwt-background-alignment);
    }
  }
}

/* Private browsing indicator */

#private-browsing-indicator-with-label {
  align-items: center;
  margin-inline: 7px;

  :root:not([privatebrowsingmode=temporary]) & {
    display: none;
  }
}

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

/* End private browsing indicator */

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

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

  /* 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: 2px 4px;
}

/* Contextual Feature Recommendation popup-notification */

#cfr-notification-header {
  width: 100%;
  display: block;
  text-align: center;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

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

#cfr-notification-header-label {
  margin: 9px;
  font-weight: 600;
}

#cfr-notification-header-link {
  margin: 7px;
  color: inherit;
  cursor: default;
  justify-self: end;
}

#cfr-notification-header-image {
  width: 19px;
  height: 19px;
  padding: 2px;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  list-style-image: url(chrome://global/skin/icons/help.svg);

  &:hover {
    background-color: hsla(0,0%,70%,.2);
    border-radius: 2px;
  }
}

#contextual-feature-recommendation-notification {
  width: 400px;

  .popup-notification-icon {
    margin-inline-end: 4px;
  }

  .cfr-doorhanger-large-icon {
    width: 64px;
    height: 64px;
    margin-inline-end: 12px;
  }

  .cfr-doorhanger-medium-icon {
    width: 50px;
    height: 50px;
    margin-inline-end: 12px;
  }

  .popup-notification-body-container {
    width: 100%;
    padding-bottom: 2px;
  }

  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;
      max-width: 700px;
      overflow-wrap: break-word;
      padding: 4px;
    }

    &:-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: 400;
      margin: unset;
      margin-inline: 12px;
    }

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

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

    .popup-notification-primary-button {
      background-color: rgba(216, 216, 216, 0.2);
      color: white;
      border: none;
      border-radius: 2px;
      margin: 4px;
      padding: 3px 12px;
      flex: 1;
      min-height: 22px;

      &::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 {
        background-color: rgba(216, 216, 216, 0.4);
      }

      &:hover:active {
        background-color: rgba(216, 216, 216, 0.5);
      }
    }

    .popup-notification-secondary-button {
      margin: 3px;
      border: none;
      border-radius: 2px;
      background-image: url(chrome://global/skin/icons/close.svg);
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
      -moz-context-properties: fill;
      fill: white;
      min-height: 22px;
      width: 22px;
      padding: 0;
      align-self: center;
      flex: none;
      font-size: 0;

      &:hover {
        background-color: rgba(216, 216, 216, 0.4);
      }
    }

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

  &[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
    width: 386px;
  }

  &[data-notification-category="addon_recommendation"] {
    .popup-notification-description > b {
      padding-inline-start: 5px;
    }

    #cfr-notification-footer-learn-more-link {
      margin-inline-start: 5px;
    }

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

    #cfr-notification-header-label {
      margin-block-end: 9px;
    }
  }

  &[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: 600;
      margin-bottom: 15px;
    }

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

#cfr-notification-footer-text-and-addon-info {
  display: block;
  padding: 10px var(--arrowpanel-padding);
}

#cfr-notification-feature-steps {
  display: flex;
  flex-direction: column;
  margin-top: 10px;

  li {
    margin-inline-start: 10px;
    position: relative;
    display: list-item;

    &:not(:last-child) {
      margin-bottom: 5px;
    }
  }
}

#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: 10px 6px;
}

#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: 16px;
}

#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: 6px;
  opacity: 0.3;
}

#cfr-notification-footer-users {
  opacity: 0.7;
}

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

/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title.
 * The title uses the inline <b> that usually contains the hostname for
 * permission prompts to achieve bold formatting. This is always the 2nd child.
 */
.popup-notification-description[popupid="doh-first-time"] > b:first-of-type {
  display: block;
  margin-bottom: 4px; /* matches the margin-bottom on description elements */
}

/* Sharing tabs warning */

#sharing-tabs-warning-panel {
  max-width: 400px;

  > 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 {
  appearance: none;
  border-style: none;
  margin: 0;
  background-color: rgb(0,96,223);
  color: rgb(255,255,255);
  border-radius: 5px;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 10px;

  &:hover {
    background-color: rgb(0,62,170);
  }
}

/* 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.  */
  max-height: 600px;
}

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

.webRTC-selectDevice-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline-end: 8px;
  /* Setting width explicitly so it's still visible if the device label is very long */
  width: 16px;
}

#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: 8px;
}

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

.popup-notification-checkbox {
  margin-block: 12px 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: 600;
  margin-top: 0;

  > b {
    font-weight: inherit;
  }
}

/* Password Manager Doorhanger */

.ac-dropmarker {
  appearance: none;
  justify-self: end;
  margin-inline-end: 8px;
  align-self: center;
  content: url(chrome://global/skin/icons/arrow-down-12.svg);
  -moz-context-properties: fill;
  fill: var(--input-color, -moz-DialogText);
}

.ac-has-end-icon {
  text-overflow: ellipsis;
  overflow: hidden;
}

.popup-notification-body input.ac-has-end-icon {
  --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */
  padding-inline-end: var(--input-padding-from-arrow-side);
}

/* Avoid overlapping the text on the arrow icon when switching input text direction */
.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) {
  padding-left: var(--input-padding-from-arrow-side);
  padding-right: 8px;
}
.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) {
  padding-right: var(--input-padding-from-arrow-side);
  padding-left: 8px;
}

.password-notification-label {
  margin-block-start: 16px;

  /**
   * There's already a margin-block-start of 8px on popupnotificationcontent,
   * so the first label only needs 8px of margin-block-start to match the
   * spec.
   */
  &:first-of-type {
    margin-block-start: 8px;
  }
}

#password-notification-visibilityToggle {
  margin-block-start: 14px;

  > .checkbox-label-box > .checkbox-label {
    opacity: 0.7;
  }
}

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

/* Relay Integration */

.relay-integration-header {
  display: flex;
  align-items: center;
  font-size: 2em;

  > div {
    width: 32px;
    height: 32px;
    background-image: url("chrome://browser/content/logos/relay.svg");
    background-repeat: no-repeat;
  }

  > span:first-of-type {
    font-weight: bold;
    margin-inline-start: 8px;
  }

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

.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: 4px;
    margin: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    > span:first-child {
      margin-inline-end: 20px;
    }

    > span:last-child {
      opacity: 0.6;
    }
  }
}

/* History swipe navigation animation */

#historySwipeAnimationPreviousArrow,
#historySwipeAnimationNextArrow {
  --swipe-nav-icon-primary-color: SelectedItemText;
  --swipe-nav-icon-accent-color: SelectedItem;

  will-change: transform;

  @media not (prefers-contrast) {
  /* TODO: Should this be in browser-custom-colors to respect system theming on
   * Linux? */
    --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF);
    --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000);
  }

  > svg {
    margin: auto 0;
  }
}

#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl),
#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
  transform: scaleX(-1);
}

.swipe-nav-icon {
  > path {
    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.
     */
    > circle {
      fill: var(--swipe-nav-icon-accent-color);
      stroke: var(--swipe-nav-icon-primary-color);
      transition: fill 1s;

      &:first-of-type {
        fill: var(--swipe-nav-icon-primary-color);
        transition: opacity 1s;
        will-change: opacity; /* a workaround for bug 1804189 */
        opacity: 0;
      }
    }

    &.will-navigate > circle:not(:first-of-type) {
      fill: var(--swipe-nav-icon-primary-color);
    }

    &.will-navigate > circle:first-of-type {
      transition-delay: 0.2s;
      opacity: 0.2;
    }

    > path {
      fill: var(--swipe-nav-icon-primary-color);
    }

    &.will-navigate > path {
      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);
  }

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

  .swipe-nav-icon.will-navigate {
    > .swipe-nav-icon-circle-outline,
    > .swipe-nav-icon-arrow {
      fill: var(--swipe-nav-icon-accent-color);
    }

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

/* TODO: move this to toolkit */
panel toolbarseparator {
  appearance: none;
  min-height: 0;
  border-top: 1px solid var(--panel-separator-color);
  border-bottom: none;
  margin: var(--panel-separator-margin);
  padding: 0;
}

/* Picture-in-Picture panel */

#PictureInPicturePanel {
  width: var(--menu-panel-width-wide);
  font: caption;
}

#PictureInPicturePanelBody {
  gap: 8px;
  padding: 8px 16px;
}

#PictureInPicturePanelFooter {
  margin: 8px 16px 16px;
}

/* Shopping sidebar */

shopping-sidebar {
  border-inline-start: 1px solid var(--chrome-content-separator-color);
  min-width: 16.92em;
  max-width: 32.31em;
  width: 320px;
  box-sizing: content-box;
}