Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 2213 insertions, 0 deletions

diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
new file mode 100644
index 0000000000..4f282b9d5a
--- /dev/null
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -0,0 +1,2213 @@
+/* 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 {
+  --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
+  --panel-item-active-bgcolor: var(--button-active-bgcolor);
+  --panel-banner-item-color: var(--button-color);
+  --panel-banner-item-background-color: var(--button-bgcolor);
+  --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor);
+  --panel-banner-item-active-bgcolor: var(--button-active-bgcolor);
+  --panel-banner-item-update-supported-bgcolor: #2AC3A2;
+  --panel-banner-item-info-icon-bgcolor: #0090ED;
+
+  --menu-panel-width: 22.35em;
+  --menu-panel-width-wide: 29em;
+
+  --arrowpanel-menuitem-margin-block: 0;
+  --arrowpanel-menuitem-margin-inline: 8px;
+  --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
+  --arrowpanel-menuitem-padding-block: 8px;
+  --arrowpanel-menuitem-padding-inline: 8px;
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+  --arrowpanel-menuitem-border-radius: 4px;
+  --arrowpanel-header-info-icon-padding: 4px;
+  --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding)));
+  --panel-separator-margin-vertical: 4px;
+  --panel-separator-margin-horizontal: 8px;
+  --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+  --panel-subview-body-padding-block: 8px;
+  --panel-subview-body-padding-inline: 0;
+  --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline);
+
+  --panel-and-palette-icon-size: 16px;
+
+  &:not(:-moz-lwtheme) {
+    --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+  }
+
+  &[uidensity=compact] {
+    --arrowpanel-menuitem-margin-inline: 4px;
+    --arrowpanel-menuitem-padding-block: 0px;
+    --panel-separator-margin-horizontal: 4px;
+    --panel-subview-body-padding-block: 4px;
+    :is(panel, menupopup):not([touchmode]) {
+      --arrowpanel-header-back-icon-padding: 4px;
+    }
+  }
+}
+
+/* The vars in this rule are not on the :root above so that they would
+ * work in conjunction with when touchmode attribute is set on the panels. */
+panel,
+menupopup {
+  /* The value for the header back icon padding is selected in a way that the
+   * height of the header and its separator will be equal to the panel inner
+   * top padding plus standard menuitem, so that the header's separator will
+   * be located excatly where a normal toolbarseparator would be located after
+   * the first menuitem, in a menu without a header. */
+  --arrowpanel-header-back-icon-padding: 6px;
+  --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding)));
+  /* The min-height is calculated with the separator's horizontal margin rather
+   * than the vertical, to let the back icon have even spacing all around
+   * while being aligned with the separator. */
+  --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width)
+                                       + (var(--panel-separator-margin-horizontal) * 2));
+}
+
+#PanelUI-menu-button {
+  &[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+    display: flex;
+    height: 10px;
+    width: 10px;
+    background-size: contain;
+    border: none;
+
+    &:-moz-window-inactive {
+      filter: grayscale(100%);
+    }
+  }
+
+  &[badge-status="extension-new-tab"],
+  &[badge-status="download-success"] {
+    > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+      display: none;
+    }
+  }
+
+  &[badge-status="update-available"],
+  &[badge-status="update-downloading"],
+  &[badge-status="update-manual"],
+  &[badge-status="update-other-instance"],
+  &[badge-status="update-restart"],
+  &[badge-status="update-unsupported"] {
+    > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+      box-shadow: none;
+      /* "!important" is necessary to override the rule in toolbarbutton.css */
+      margin: -5px 0 0 !important;
+      margin-inline-end: -3px !important;
+      min-width: 12px;
+      min-height: 12px;
+      -moz-context-properties: fill;
+      background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
+      background-size: 12px;
+    }
+  }
+
+  &[badge-status="update-available"],
+  &[badge-status="update-downloading"],
+  &[badge-status="update-manual"],
+  &[badge-status="update-other-instance"],
+  &[badge-status="update-restart"] {
+    > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+      fill: var(--panel-banner-item-update-supported-bgcolor);
+    }
+  }
+
+  &[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+    background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
+    fill: var(--warning-icon-bgcolor);
+  }
+}
+
+.panel-banner-item {
+  &[notificationid="update-available"],
+  &[notificationid="update-downloading"],
+  &[notificationid="update-manual"],
+  &[notificationid="update-other-instance"],
+  &[notificationid="update-restart"] {
+    > .toolbarbutton-icon {
+      background-image: url(chrome://browser/skin/update-badge.svg);
+      background-repeat: no-repeat;
+      background-position: center;
+      -moz-context-properties: fill;
+      fill: var(--panel-banner-item-update-supported-bgcolor);
+    }
+  }
+
+  &[notificationid="update-unsupported"] > .toolbarbutton-icon {
+    background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+    -moz-context-properties: stroke, fill;
+    stroke: var(--arrowpanel-background);
+    fill: var(--warning-icon-bgcolor);
+  }
+}
+
+
+
+#PanelUI-menu-button[badge-status="addon-alert"],
+#PanelUI-menu-button[badge-status="fxa-needs-authentication"],
+#fxa-toolbar-menu-button[badge-status="login_failed"] {
+  > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+    height: 13px;
+    background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent;
+    box-shadow: none;
+    border-radius: 0;
+    -moz-context-properties: fill, stroke;
+    fill: var(--warning-icon-bgcolor);
+    stroke: var(--toolbar-bgcolor);
+  }
+}
+
+#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: flex;
+}
+
+.cui-widget-panel,
+#widget-overflow,
+#unified-extensions-panel {
+  font: menu;
+}
+
+panelview {
+  flex-direction: column;
+  background: var(--arrowpanel-background);
+  padding: 0;
+
+  /* Prevent a scrollbar from appearing while the animation for transitioning from
+    one view to another runs, which would otherwise happen if the new view has
+    more height than the old one because that would mean that during the
+    animation the height of the multiview will be too short for the new view. */
+  &[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
+    overflow-y: hidden;
+  }
+}
+
+.panel-subview-body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  padding: var(--panel-subview-body-padding);
+
+  &:not(:last-child) {
+    padding-bottom: 0;
+  }
+
+  toolbarseparator + & {
+    padding-top: 0;
+  }
+}
+
+.panel-view-body-unscrollable {
+  overflow: hidden;
+  flex: 1;
+}
+
+.panel-info-button {
+  appearance: none;
+  color: inherit;
+  padding: 0;
+  border-radius: var(--toolbarbutton-border-radius);
+  flex-shrink: 0;
+
+  &[disabled=true] {
+    visibility: hidden;
+  }
+
+  &:hover {
+    background-color: var(--panel-item-hover-bgcolor);
+  }
+
+  &:not(:hover)[checked],
+  &:hover:active {
+    background-color: var(--panel-item-active-bgcolor);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+
+  > image {
+    list-style-image: url(chrome://global/skin/icons/info.svg);
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    padding: var(--arrowpanel-header-info-icon-padding);
+  }
+}
+
+#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
+#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
+:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
+  margin: var(--arrowpanel-menuitem-margin);
+}
+
+/* Tweaks for menupopups hanging off toolbar buttons to make them feel like panels */
+
+.toolbar-menupopup {
+  &,
+  menupopup {
+    appearance: none;
+    border: none;
+    font: menu;
+    background-color: transparent;
+    --panel-background: var(--arrowpanel-background);
+    --panel-color: var(--arrowpanel-color);
+    --panel-border-color: var(--arrowpanel-border-color);
+    --panel-border-radius: var(--arrowpanel-border-radius);
+    --panel-padding: var(--panel-subview-body-padding);
+  }
+
+  menupopup {
+    /* Align non top-level menupopup's first menuitem with the menuitem that opened it.
+     * The 1px is for the menupopup's border. */
+    margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px));
+  }
+
+  :is(menu, menuitem) {
+    &[disabled] {
+      color: var(--panel-disabled-color);
+    }
+
+    &:not([disabled])[_moz-menuactive] {
+      color: inherit;
+      background-color: var(--panel-item-hover-bgcolor);
+
+      &:active {
+        color: inherit;
+        background-color: var(--panel-item-active-bgcolor);
+      }
+    }
+
+    &::before,
+    &::after {
+      content: none; /* Reset's macOS' checkmark spacing */
+    }
+  }
+
+  .menu-text,
+  .menu-iconic-text,
+  .menu-iconic-icon,
+  .menu-iconic-left,
+  .menu-iconic-accel,
+  .menu-accel-container,
+  .menu-accel,
+  .menu-right {
+    /* Reset every spacing and appearance set by the platforms' menu.css
+     * and set the ones we need in the following rules. */
+    margin: 0;
+    padding: 0;
+    appearance: none;
+  }
+
+  :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left {
+    margin-inline-end: 8px;
+  }
+
+  .menu-accel,
+  .menu-iconic-accel {
+    margin-inline-start: 16px;
+  }
+
+  menu > .menu-right {
+    list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    fill-opacity: 0.6;
+    width: unset;
+    height: unset;
+
+    &:-moz-locale-dir(rtl) {
+      list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+    }
+  }
+
+  menuseparator {
+    padding: var(--panel-separator-margin);
+  }
+}
+
+#BMB_bookmarksPopup {
+  max-width: 30em;
+}
+
+:is(.toolbar-menupopup, .toolbar-menupopup menupopup)[emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel {
+  margin: 0;
+}
+
+#confirmation-hint {
+  --arrowpanel-background: #0060df;
+  --arrowpanel-border-color: #0060df;
+  --arrowpanel-color: #fff;
+  --arrowpanel-padding: 6px 10px;
+  font-weight: 400;
+  font-size: 1.1rem;
+
+  &::part(content) {
+    align-items: center;
+  }
+
+  /* Don't show the checkmark if there is a description */
+  &.with-description #confirmation-hint-checkmark-animation-container {
+    display: none;
+  }
+
+  &[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image {
+    background-image: url("chrome://global/skin/icons/delete.svg");
+    background-size: contain;
+    -moz-context-properties: fill;
+    fill: #FFF;
+    animation: none;
+  }
+}
+
+#confirmation-hint-checkmark-animation-container {
+  position: relative;
+  overflow: hidden;
+  width: 14px;
+  height: 14px;
+
+  &[animate] > #confirmation-hint-checkmark-image {
+    display: block;
+    position: absolute;
+    background-image: url(chrome://browser/skin/success-animation.svg);
+    background-repeat: no-repeat;
+    /* frames are 16px wide by 14px high */
+    min-width: 304px;
+    max-width: 304px;
+    min-height: 14px;
+    max-height: 14px;
+    animation-name: confirmation-hint-checkmark-animation;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(18);
+    -moz-context-properties: fill;
+    fill: currentColor;
+
+    &:-moz-locale-dir(rtl) {
+      animation-name: confirmation-hint-checkmark-animation-rtl;
+      transform: translateX(288px);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation-duration: 300ms;
+      animation-delay: 60ms;
+    }
+  }
+}
+
+@keyframes confirmation-hint-checkmark-animation {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-288px);
+  }
+}
+
+@keyframes confirmation-hint-checkmark-animation-rtl {
+  from {
+    transform: translateX(288px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+#confirmation-hint-message {
+  margin-inline: 7px 0;
+
+  #confirmation-hint.with-description & {
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #confirmation-hint-message-container {
+    transform: scale(.8);
+    opacity: 0;
+    transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
+                opacity 60ms linear;
+
+    #confirmation-hint-checkmark-animation-container[animate] + & {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+panelview[id^=PanelUI-webext-] {
+  overflow: hidden;
+}
+
+.cui-widget-panel {
+  --arrowpanel-padding: var(--panel-subview-body-padding);
+}
+
+#appMenu-popup panelview,
+/* The Report Broken Site panel can be opened from the Help menu
+ * in the menubar, which isn't a descendant of #appMenu-popup.
+ * Target it specifically in this rule to make it the same width
+ * as if it was a standard panelview opened from the app menu. */
+#report-broken-site-popup-mainView[mainview],
+#PanelUI-fxa {
+  width: 22.5em;
+}
+
+:where(#customizationui-widget-multiview) panelview:not([extension]) {
+  min-width: var(--menu-panel-width);
+  max-width: 35em;
+}
+
+#appMenu-libraryView,
+#pageActionPanel panelview,
+#widget-overflow panelview {
+  min-width: var(--menu-panel-width-wide);
+  max-width: var(--menu-panel-width-wide);
+}
+
+/* Add 2 * 16px extra width for touch mode button padding. */
+#appMenu-popup[touchmode] panelview {
+  min-width: calc(var(--menu-panel-width) + 32px);
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+) > toolbarbutton > .toolbarbutton-icon {
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+
+.animate-out {
+  animation-name: widget-animate-out;
+  animation-fill-mode: forwards;
+  animation-duration: 500ms;
+  animation-timing-function: var(--animation-easing-function);
+}
+
+@keyframes widget-animate-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0 ;
+    transform: scale(.5);
+  }
+}
+
+toolbarpaletteitem {
+  &[place="panel"] > .toolbarbutton-1 {
+    flex: 1;
+  }
+}
+
+/* Help webextension buttons fit in. */
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  height: var(--panel-and-palette-icon-size);
+  width: var(--panel-and-palette-icon-size);
+}
+
+#customization-palette .toolbarbutton-1 {
+  appearance: none;
+  flex-direction: column;
+  padding: 12px 0 9px;
+  margin: 0;
+}
+
+/* above we treat the container as the icon for the margins, that is so the
+/* badge itself is positioned correctly. Here we make sure that the icon itself
+/* has the minimum size we want, but no padding/margin. */
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  width: var(--panel-and-palette-icon-size);
+  height: var(--panel-and-palette-icon-size);
+  min-width: var(--panel-and-palette-icon-size);
+  min-height: var(--panel-and-palette-icon-size);
+  margin: 0;
+  padding: 0;
+}
+
+#zoom-in-button > .toolbarbutton-text,
+#zoom-out-button > .toolbarbutton-text,
+#zoom-reset-button > .toolbarbutton-icon {
+  display: none;
+}
+
+/* Main menu banner menuitems */
+
+#appMenu-popup {
+  .panel-banner-item,
+  .addon-banner-item {
+    align-items: flex-start;
+    color: var(--panel-banner-item-color);
+    background-color: var(--panel-banner-item-background-color);
+    margin-bottom: 4px;
+    font-weight: 600;
+  }
+
+  .panel-banner-item,
+  .addon-banner-item {
+    &:not([disabled]):hover {
+      background-color: var(--panel-banner-item-hover-bgcolor);
+
+      &:active {
+        background-color: var(--panel-banner-item-active-bgcolor);
+      }
+    }
+
+    > .toolbarbutton-text {
+      display: inline-block;
+      padding: 0;
+    }
+  }
+}
+
+:root[uidensity="compact"] {
+  .panel-banner-item,
+  .addon-banner-item {
+    /* Without some padding the button gets too crowded even for compact mode
+      when the text wraps to a newline. */
+    padding-block: 4px;
+  }
+}
+
+.panel-banner-item > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  /* Move the icon to appear after the text label. */
+  order: 2;
+}
+
+.addon-banner-item {
+  > .toolbarbutton-icon {
+    display: none;
+  }
+
+  /* Addon banners use that one for the addon's icon and need a content element
+    added to put their generic notification in. */
+  &::after {
+    content: "";
+    display: flex;
+    background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+    width: 16px;
+    height: 16px;
+    -moz-context-properties: fill;
+    fill: var(--warning-icon-bgcolor);
+    margin-inline-start: 10px;
+  }
+}
+
+/* FxAccount indicator bits. */
+
+@keyframes syncRotate {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon,
+  #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon,
+  .syncNowBtn[syncstatus="active"] {
+    animation: syncRotate 0.8s linear infinite;
+    -moz-context-properties: fill;
+    fill: var(--toolbarbutton-icon-fill-attention);
+    visibility: visible;
+  }
+}
+
+.syncNowBtn {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  list-style-image: url("chrome://browser/skin/sync.svg");
+  visibility: collapse;
+  order: 2;
+}
+
+#fxa-menu-account-fxa-avatar {
+  pointer-events: none;
+  list-style-image: var(--avatar-image-url);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Handle different UI states. */
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
+  display: none;
+}
+
+/* Error states */
+
+#appMenu-fxa-status2 {
+  display: flex;
+
+  &[fxastatus] {
+    margin: 0;
+    padding: 0;
+  }
+
+  &:not([fxastatus]) {
+    padding-block: 0 2px;
+
+    > #appMenu-fxa-label2 {
+      padding: 6px 12px;
+      background-color: var(--button-bgcolor);
+      font-size: 0.8em;
+      font-weight: 600;
+
+      &:hover {
+        background-color: var(--button-hover-bgcolor);
+      }
+
+      &:hover:active {
+        background-color: var(--button-active-bgcolor);
+      }
+    }
+  }
+}
+
+#appMenu-fxa-text,
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 {
+  flex: 1;
+  align-self: center;
+}
+
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description,
+#appMenu-fxa-text {
+  font-weight: 600;
+}
+
+:root[fxadisabled=true] #appMenu-fxa-status2,
+:root[fxadisabled=true] #appMenu-fxa-separator {
+  display: none;
+}
+
+#fxa-manage-account-button > vbox > label,
+#PanelUI-fxa-menu-syncnow-button > hbox > label,
+#PanelUI-remotetabs-syncnow > hbox > label,
+#appMenu-fxa-label2 > vbox > label {
+  margin: 0;
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  font-size: 11px;
+}
+
+#appMenu-fxa-status2 {
+  &[fxastatus="login-failed"] #appMenu-fxa-label2::after {
+    content: url("chrome://global/skin/icons/warning.svg");
+    -moz-context-properties: fill;
+    fill: var(--warning-icon-bgcolor);
+  }
+
+  &[fxastatus="unverified"] #appMenu-fxa-label2::after {
+    content: url("chrome://global/skin/icons/info-filled.svg");
+    -moz-context-properties: fill;
+    fill: var(--panel-banner-item-info-icon-bgcolor);
+  }
+}
+
+/* Firefox Account Toolbar Panel */
+
+#fxa-avatar-image {
+  width: 16px;
+  height: 16px;
+}
+
+:root {
+  --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
+
+  &[fxastatus="not_configured"] {
+    --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
+  }
+
+  &:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
+    display: none;
+  }
+
+  /* stylelint-disable-next-line media-query-no-invalid */
+  @media not (-moz-bool-pref: "identity.fxaccounts.toolbar.defaultVisible") {
+    /* Hide the FxA toolbar button when its in the nav-bar, until in use */
+    &[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button,
+    &[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button {
+      display: none;
+    }
+  }
+
+  /* Non-signedin statuses icons are not totally round. */
+  &[fxastatus="signedin"] #fxa-avatar-image {
+    border-radius: 50%;
+  }
+
+  &:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
+    color: var(--panel-disabled-color);
+  }
+}
+
+#fxa-avatar-image,
+#PanelUI-fxa-menu-account-settings-button {
+  list-style-image: var(--avatar-image-url);
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+  /* Use 'lighter' font for this to de-emphasize it compared to the title. */
+  font-weight: lighter;
+
+  @media (-moz-platform: linux) {
+     /* Use 300 on Linux because 100 is too light (lacks contrast with
+     * the background) for some fonts in combination with anti-aliasing. */
+     font-weight: 300;
+  }
+}
+
+#fxa-menu-header-title {
+  color: var(--arrowpanel-color);
+}
+
+#fxa-menu-header-description {
+  color: var(--text-color-deemphasized);
+  font-weight: var(--font-weight-bold);
+}
+
+#cta-menu-header-description {
+  color: var(--text-color-deemphasized);
+}
+
+#PanelUI-appMenu-fxa-label-last-synced {
+  font-size: 10px;
+  font-style: italic;
+  color: var(--text-color-deemphasized);
+}
+
+#PanelUI-fxa-menu-send-button {
+  list-style-image: url(chrome://browser/skin/fxa/send.svg);
+}
+
+.ctaMenuLogo {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 5px;
+}
+
+#PanelUI-fxa-menu-monitor-button {
+  list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
+}
+
+#PanelUI-fxa-menu-relay-button {
+  list-style-image: url(chrome://browser/content/logos/relay.svg);
+}
+
+#PanelUI-fxa-menu-vpn-button {
+  list-style-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
+  color: var(--panel-disabled-color);
+}
+
+/* From the FxA menu -> synced tabs, we don't need to clutter the view with
+   redundant buttons because these are accessible from the main menu */
+panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
+  display: none;
+}
+
+#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices {
+  display: none;
+}
+
+#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+.fxaSendLogo,
+.fxaMonitorLogo {
+  margin-top: 15px;
+  height: 80px;
+  width: 80px;
+}
+
+.fxaSendToDeviceLogo {
+  margin-top: 15px;
+  height: 119px;
+  width: 164px;
+  list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg);
+}
+
+.fxaSendLogo {
+  list-style-image: url(chrome://browser/content/logos/send.svg);
+}
+
+.fxaMonitorLogo {
+  list-style-image: url(chrome://browser/content/logos/monitor.svg);
+}
+
+#PanelUI-remotetabs {
+  --panel-ui-sync-illustration-height: 141px;
+}
+
+.sendToDevice-device {
+  &[clientType=phone] {
+    list-style-image: url("chrome://browser/skin/device-phone.svg");
+  }
+
+  &[clientType=tablet] {
+    list-style-image: url("chrome://browser/skin/device-tablet.svg");
+  }
+
+  &[clientType=desktop] {
+    list-style-image: url("chrome://browser/skin/device-desktop.svg");
+  }
+
+  &[clientType=tv] {
+    list-style-image: url("chrome://browser/skin/device-tv.svg");
+  }
+
+  &[clientType=vr] {
+    list-style-image: url("chrome://browser/skin/device-vr.svg");
+  }
+
+  &.signintosync {
+    list-style-image: url("chrome://browser/skin/sync.svg");
+  }
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+  /* If you change the margin here, the min-height of the synced tabs panel
+    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+    need adjusting (see bug 1248506) */
+  margin: 0;
+  text-align: center;
+  text-shadow: none;
+  max-width: 15em;
+  margin-top: 10px;
+}
+
+.PanelUI-fxa-signin-button,
+.PanelUI-remotetabs-button {
+  appearance: none;
+  background-color: #0060df;
+  /* !important for the color as an OSX specific rule when a lightweight theme
+     is used for buttons in the toolbox overrides. See bug 1238531 for details */
+  color: white !important;
+  border-radius: 2px;
+  /* If you change the margin or padding below, the min-height of the synced tabs
+     panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
+     etc) may need adjusting (see bug 1248506) */
+  margin-block: 15px;
+  text-shadow: none;
+  min-width: 200px;
+  padding: 1em;
+
+  &:hover {
+    background-color: #003eaa;
+
+    &:active {
+      background-color: #002275;
+    }
+  }
+}
+
+.remotetabs-promo-link {
+  margin: 0;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+  color: var(--text-color-deemphasized);
+  /* This margin is to line this label up with the labels in toolbarbuttons. */
+  margin-inline-start: 28px;
+}
+
+.fxaSyncIllustration,
+.fxaSyncIllustrationIssue {
+  /* If you change the margin here, the min-height of the synced tabs panel
+  (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+  need adjusting (see bug 1248506) */
+  width: 204px;
+  height: var(--panel-ui-sync-illustration-height);
+  -moz-context-properties: fill;
+  fill: #cdcdcd;
+}
+
+.fxaSyncIllustration {
+  list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
+}
+
+.fxaSyncIllustrationIssue {
+  list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
+}
+
+.PanelUI-fxa-signin-button > .toolbarbutton-text,
+.PanelUI-remotetabs-button > .toolbarbutton-text {
+  /* Overrides toolbar[mode="icons"] from xul.css */
+  display: block;
+}
+
+#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
+  min-width: 19em;
+
+  .PanelUI-remotetabs-notabsforclient-label {
+    margin-inline-start: 32px;
+  }
+
+  /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
+   the panel is anchored to a toolbar button.
+  */
+  #PanelUI-remotetabs-setupsync,
+  #PanelUI-remotetabs-syncdisabled,
+  #PanelUI-remotetabs-reauthsync,
+  #PanelUI-remotetabs-unverified,
+  #PanelUI-remotetabs-nodevicespane,
+  #PanelUI-remotetabs-tabsdisabledpane {
+    min-height: calc(var(--panel-ui-sync-illustration-height) +
+                15px + /* margin of .fxaSyncIllustration */
+                30px + /* margin of .PanelUI-remotetabs-button */
+                8px + /* padding of .PanelUI-remotetabs-button */
+                1em);
+  }
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  color: var(--text-color-deemphasized);
+}
+
+/* Collapse the non-active vboxes in the remotetabs deck to use only the
+  height the active box needs */
+#PanelUI-remotetabs-deck {
+  &:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
+  &:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
+  &:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
+    visibility: collapse;
+  }
+}
+
+#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
+  display: none;
+}
+
+#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) {
+  display: none;
+}
+
+#customization-palette .toolbarbutton-text {
+  display: none;
+}
+
+.toolbar-menupopup :is(menu, menuitem),
+.subview-subheader,
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+  appearance: none;
+  margin: var(--arrowpanel-menuitem-margin);
+  min-height: 24px;
+  padding: var(--arrowpanel-menuitem-padding);
+  border-radius: var(--arrowpanel-menuitem-border-radius);
+  background-color: transparent;
+  flex-shrink: 0;
+}
+
+.subview-subheader {
+  font-size: 11px;
+  font-weight: inherit;
+  color: var(--text-color-deemphasized);
+  padding-block: 4px;
+  box-sizing: border-box;
+}
+
+.subviewbutton {
+  /* toolbarbuttons default to centered, but we don't want that for subviews. */
+  justify-content: flex-start;
+
+  &[disabled="true"] {
+    color: var(--panel-disabled-color);
+  }
+
+  /* We don't always display: none this item, and if it has forced width (like above)
+  * or margin, that impacts the position of the label. Fix:
+  */
+  > .toolbarbutton-icon {
+    margin: 0;
+  }
+
+  > .toolbarbutton-text {
+    text-align: start;
+    display: block;
+  }
+
+  &[shortcut]::after {
+    content: attr(shortcut);
+    display: flex;
+  }
+
+  @media not (prefers-contrast) {
+    &[shortcut]:not([disabled])::after {
+      color: var(--panel-disabled-color);
+    }
+  }
+
+  &[shortcut]::after,
+  .widget-overflow-list .subviewbutton-nav::after,
+  .PanelUI-subView .subviewbutton-nav::after {
+    margin-inline-start: 10px;
+  }
+
+  &[checked="true"] {
+    list-style-image: url(chrome://global/skin/icons/check.svg);
+    -moz-context-properties: fill;
+    fill: currentColor;
+    color: inherit;
+  }
+
+  &[type="open-to-new"]::after {
+    content: url(chrome://global/skin/icons/open-in-new.svg);
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    fill-opacity: 0.6;
+    display: flex;
+    height: 12px;
+    width: 12px;
+  }
+
+  &[type="open-to-new"]:-moz-locale-dir(rtl)::after {
+    transform: scaleX(-1);
+  }
+}
+
+.subviewbutton-iconic > .toolbarbutton-text,
+.subviewbutton[image] > .toolbarbutton-text,
+.subviewbutton[targetURI] > .toolbarbutton-text,
+.subviewbutton.bookmark-item > .toolbarbutton-text,
+.subviewbutton[checked="true"] > .toolbarbutton-text {
+  padding-inline-start: 8px;
+}
+
+.subviewbutton-iconic > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,
+ * also in compact density and touch mode. */
+#appMenu-zoom-controls {
+  padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px);
+
+  > .subviewbutton {
+    margin-inline-start: 2px;
+    padding: 4px;
+  }
+
+  /* hover and active color changes are applied to child elements not the button itself */
+  > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
+    color: unset;
+    background-color: unset;
+  }
+
+  > .subviewbutton:focus-visible {
+    outline: none;
+  }
+}
+
+#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon,
+#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text {
+  outline: var(--focus-outline);
+}
+
+#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
+  -moz-context-properties: fill, stroke;
+  fill: var(--button-color);
+  /* the stroke color is used to fill the circle in the icon */
+  stroke: var(--button-bgcolor);
+  border-radius: 50%;
+  padding: 0;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text,
+#appMenu-fullscreen-button2 > .toolbarbutton-icon  {
+  border-radius: 2px;
+}
+
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
+  padding: 1px;
+  background-color: var(--button-bgcolor);
+}
+
+#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon {
+  stroke: var(--panel-item-hover-bgcolor);
+}
+
+#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+#appMenu-zoomReduce-button2:not([disabled]),
+#appMenu-zoomEnlarge-button2:not([disabled]) {
+  &:hover {
+    > .toolbarbutton-icon {
+      stroke: var(--panel-item-hover-bgcolor);
+    }
+  }
+
+  &:active:hover {
+    > .toolbarbutton-icon {
+      stroke: var(--panel-item-active-bgcolor);
+    }
+  }
+}
+
+/**
+ * When the Zoom Reset button is disabled, we don't want the zoom-level
+ * indicator to be so hard to read, so we override the disabled text
+ * style on it.
+ */
+#appMenu-zoomReset-button2[disabled],
+#zoom-reset-button[disabled] {
+  opacity: 1;
+}
+
+.panel-subview-footer-button {
+  /* Set the footer's bottom margin according to menuitems inline margin
+     to make sure the footer's margin is even from all sides. */
+  margin-bottom: var(--arrowpanel-menuitem-margin-inline);
+}
+
+#protections-popup-mainView .subviewbutton-nav:not(.notFound),
+.widget-overflow-list .subviewbutton-nav,
+.PanelUI-subView .subviewbutton-nav {
+  &::after {
+    -moz-context-properties: fill, fill-opacity;
+    content: url(chrome://global/skin/icons/arrow-right.svg);
+    fill: currentColor;
+    fill-opacity: 0.6;
+    display: flex;
+  }
+
+  &:-moz-locale-dir(rtl)::after {
+    content: url(chrome://global/skin/icons/arrow-left.svg);
+  }
+}
+
+.PanelUI-subView {
+  .subviewbutton-nav-down::after {
+    content: url(chrome://global/skin/icons/arrow-down.svg);
+  }
+
+  .toolbaritem-combined-buttons > .subviewbutton {
+    flex: none;
+    height: auto;
+    margin-inline-start: 18px;
+    min-width: auto;
+    padding: 4px 5px;
+  }
+
+  .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
+  .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
+    display: none;
+  }
+
+  toolbarseparator.proton-zap {
+    border-image: var(--panel-separator-zap-gradient, none) 1;
+  }
+}
+
+/* A menu item with some buttons at the end. */
+.toolbaritem-menu-buttons {
+  /* Use the same margin at the start as at the end (other margin set below). */
+  margin-inline-start: 8px;
+
+  > .subviewbutton {
+    min-width: auto;
+    padding-inline: 5px;
+  }
+
+  > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text {
+    display: none;
+  }
+}
+
+.toolbaritem-combined-buttons,
+.toolbaritem-menu-buttons {
+  align-items: center;
+  flex-direction: row;
+  border: 0;
+  border-radius: 0;
+}
+
+.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]),
+.toolbaritem-menu-buttons {
+  margin-inline-end: 8px;
+}
+
+panelmultiview .toolbaritem-combined-buttons > label {
+  flex: 1;
+  margin: 0;
+  padding: 4px 0;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text {
+  min-width: calc(4ch + 8px);
+  text-align: center;
+}
+
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+  padding-inline-start: 0;
+}
+
+panelview .toolbarbutton-1 {
+  margin-top: 6px;
+}
+
+:is(
+  panelview .toolbarbutton-1,
+  toolbarbutton.subviewbutton,
+  .widget-overflow-list .toolbarbutton-1,
+  .toolbaritem-combined-buttons:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton
+) {
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-inset);
+  }
+
+  /* hover styles for not-disabled, not-active buttons */
+  &:not([disabled]):hover {
+    color: inherit;
+    background-color: var(--panel-item-hover-bgcolor);
+
+    /* hovered-and-active styles for not-disabled buttons */
+    &:active {
+      color: inherit;
+      background-color: var(--panel-item-active-bgcolor);
+      box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+    }
+  }
+}
+
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"],
+#PanelUI-historyItems > toolbarbutton {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#fxa-menu-account-fxa-avatar,
+#appMenu-fxa-label > .toolbarbutton-icon,
+#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon,
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
+#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#PanelUI-fxa-remotetabs-tabspane {
+  min-width: 0;
+}
+
+#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon {
+  border-radius: 50%;
+}
+
+toolbarpaletteitem {
+  &[place="palette"] > #search-container {
+    min-width: 7em;
+    width: 7em;
+    min-height: 37px;
+    max-height: 37px;
+  }
+
+  &[place="panel"],
+  &[place="panel"] > toolbaritem {
+    flex: 1;
+  }
+
+  &[place="menu-panel"] > .subviewbutton-nav::after {
+    opacity: 0.5;
+  }
+}
+
+.toolbaritem-combined-buttons {
+  &:where(:not(.unified-extensions-item)):is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton {
+    border: 0;
+    margin: 0;
+    flex: 1;
+    padding-block: var(--arrowpanel-menuitem-padding-block);
+    flex-direction: row;
+  }
+
+  &[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
+  &[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker {
+    display: none;
+  }
+
+  &:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+    opacity: 0.4;
+    /* Override toolbarbutton.css which sets the color to GrayText */
+    color: inherit;
+  }
+
+  &:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > separator {
+    appearance: none;
+    align-items: stretch;
+    margin: .5em 0;
+    width: 1px;
+    height: auto;
+    background: var(--panel-separator-color);
+    transition-property: margin;
+    transition-duration: 10ms;
+    transition-timing-function: ease;
+  }
+
+  &:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ):hover > separator {
+    margin: 0;
+  }
+}
+
+#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
+  display: block;
+  /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */
+  min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2);
+}
+
+.widget-overflow-list {
+  .toolbarbutton-1 {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
+    text-align: start;
+    padding-inline-start: .5em;
+  }
+}
+
+#PanelUI-panicView > .panel-subview-body,
+#PanelUI-panicView {
+  overflow: visible;
+}
+
+#PanelUI-panicView.cui-widget-panelview {
+  min-width: 280px;
+}
+
+#PanelUI-panic-timeframe {
+  padding: 15px;
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+#panic-button-success-icon,
+#PanelUI-panic-timeframe-icon {
+  background-color: transparent;
+  margin-inline-end: 10px;
+  list-style-image: image-set(
+    url(chrome://browser/skin/panic-panel/header.png),
+    url(chrome://browser/skin/panic-panel/header@2x.png) 2x
+  );
+  max-height: 48px;
+  width: 48px;
+}
+
+#panic-button-success-header {
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.subviewradio {
+  appearance: none;
+  align-items: center;
+  padding: 3px;
+  margin: 0 0 2px;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: var(--button-hover-bgcolor);
+  }
+
+  &:is([selected], [selected]:hover, :hover:active) {
+    background-color: var(--button-active-bgcolor);
+  }
+
+  > .radio-check {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgba(110, 110, 110, 0.4);
+    border-radius: 50%;
+    margin: 1px 5px;
+    background-color: rgba(150,150,150,0.2);
+  }
+
+  > .radio-check[selected] {
+    background-color: light-dark(#fff, transparent);
+    border: 4px solid light-dark(#177ee6, #00ddff);
+  }
+}
+
+radiogroup:focus-visible > .subviewradio[focused="true"] {
+  outline: var(--focus-outline);
+
+  > .radio-label-box {
+    outline: none;
+  }
+}
+
+#PanelUI-panic-explanations {
+  padding: 10px 10px 0;
+}
+
+#PanelUI-panic-actionlist-main-label {
+  color: var(--text-color-deemphasized);
+  font-size: 0.9em;
+}
+
+.PanelUI-panic-actionlist {
+  padding: 2px 0;
+
+  &::before {
+    display: inline-block;
+    content: "";
+    width: 16px;
+    height: 16px;
+    margin-inline-end: 4px;
+    background-image: image-set(
+      url(chrome://browser/skin/panic-panel/icons.png),
+      url(chrome://browser/skin/panic-panel/icons@2x.png) 2x
+    );
+    vertical-align: bottom;
+  }
+}
+
+#PanelUI-panic-actionlist-history::before {
+  background-position-x: 16px;
+}
+
+#PanelUI-panic-actionlist-windows::before {
+  background-position-x: 32px;
+}
+
+#PanelUI-panic-actionlist-newwindow::before {
+  background-position-x: 48px;
+}
+
+#PanelUI-panic-warning {
+  color: #d74345;
+  text-align: center;
+  width: 100%;
+  margin-top: 20px;
+}
+
+#PanelUI-panic-view-button {
+  appearance: none;
+  background-color: var(--buttons-destructive-bgcolor);
+  color: var(--buttons-destructive-color);
+  margin: 5px 15px 11px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-weight: 600;
+  padding: 10px;
+
+  &:hover {
+    background-color: var(--buttons-destructive-hover-bgcolor);
+  }
+
+  &:hover:active {
+    background-color: var(--buttons-destructive-active-bgcolor);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  > .toolbarbutton-text {
+    text-align: center;
+    text-shadow: none;
+  }
+}
+
+#panic-button-success-closebutton {
+  background-color: var(--button-bgcolor);
+  color: var(--button-color);
+  margin: 5px 0 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 10px;
+  font-weight: 600;
+  appearance: none;
+
+  &:hover {
+    background-color: var(--button-hover-bgcolor);
+    &:active {
+      background-color: var(--button-active-bgcolor);
+    }
+  }
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  /* Set the header's padding according to menuitems horizontal padding
+     to make sure they are even from all sides and aligned according to that padding. */
+  padding: var(--arrowpanel-menuitem-margin-inline);
+  /* Calculate the header's height assuming it includes an icon even if it doesn't,
+     to make sure all headers are the same height (assuming their text is a one liner). */
+  min-height: var(--arrowpanel-header-min-height);
+
+  + toolbarseparator {
+    margin-top: 0 !important;
+  }
+
+  > h1 {
+    flex: auto;
+    margin: 0;
+  }
+
+  &.panel-header-with-info-button > h1 {
+    /* Add the size of the info button to center properly. */
+    margin-inline-start: var(--arrowpanel-header-info-icon-full-width);
+  }
+
+  &.panel-header-with-info-button > .subviewbutton-back + h1 {
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width)
+                            - var(--arrowpanel-header-info-icon-full-width));
+  }
+
+  &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
+    /* Add the size of the back button to center properly. */
+    margin-inline-end: var(--arrowpanel-header-back-icon-full-width);
+  }
+
+  &.panel-header-with-additional-element > .additional-element-on-inline-start + h1 {
+    /* This is for panels where the extra element is on the inline-start side like
+     * the Report Broken Site panel.
+     * The var needs to be set manually via CSS on the .panel-header element as we
+     * can't predict what icon (and thus its size) may be in use. */
+    margin-inline-end: var(--arrowpanel-header-additional-element-width);
+  }
+
+  > h1 > span {
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+
+  > .subviewbutton-back {
+    -moz-context-properties: fill;
+    fill: var(--arrowpanel-color);
+    list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+    padding: var(--arrowpanel-header-back-icon-padding);
+  }
+
+  > .subviewbutton-back:-moz-locale-dir(rtl) {
+    list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+  }
+}
+
+.subviewbutton-back {
+  margin: 0;
+
+  > .toolbarbutton-text {
+    display: none;
+  }
+}
+
+/* What's New panel */
+#customizationui-widget-multiview #PanelUI-whatsNew {
+  max-width: var(--menu-panel-width);
+}
+
+#protections-popup {
+  #messaging-system-message-container {
+    height: 260px;
+    overflow: hidden;
+    transition: margin-bottom .25s;
+  }
+
+  #messaging-system-message-container[disabled] {
+    /* Offset the height when hidden. This makes the panel content
+    * cover the info message and reveal it as it slides down, rather
+    * than the info message growing in height. */
+   margin-bottom: -260px;
+   pointer-events: none;
+ }
+
+  #messaging-system-message-container[disabled] #protections-popup-message {
+    opacity: 0;
+  }
+}
+
+#protections-popup-message {
+  display: flex;
+  align-items: flex-end;
+  height: calc(100% - 20px);
+  margin: 10px;
+  transition: opacity .25s;
+  opacity: 1;
+  background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
+  background-repeat: no-repeat;
+  background-position: top right;
+  -moz-context-properties: fill;
+
+  &:-moz-locale-dir(rtl) {
+    background-position-x: left;
+  }
+
+  .protections-popup-content {
+    display: block;
+    margin: 12px 0;
+  }
+
+  .whatsNew-message-body {
+    /* -10px to compensate for the margin on the container. We can't get rid of that
+       because it helps position the background image. */
+    margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
+    margin-inline: 6px;
+  }
+
+  .text-link {
+    color: inherit;
+    font-weight: 600;
+  }
+}
+
+panelview {
+  &[mainview] #PanelUI-whatsNew-content {
+    height: 43em;
+  }
+
+  /* Hide the What's New header when the panel is a subview */
+  &:not([mainview]) #PanelUI-whatsNew-title {
+    display: none;
+  }
+}
+
+#PanelUI-whatsNew {
+  .panelMenu-toggleWhatsNew-checkbox {
+    padding-inline-start: 16px;
+    min-height: 41px;
+  }
+
+  .whatsNew-message {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* The following 2 rules show a 1 pixel line separator between What's New
+  * messages while at the same time ensuring that the first message (which has
+  * a date header) will not show the separator
+  */
+  .whatsNew-message-body::before {
+    content: "";
+    display: block;
+    height: 1px;
+    width: 104%;
+    margin-inline-start: -2%;
+    background: var(--panel-separator-color);
+  }
+
+  .has-icon::before {
+    /* the width of the icon + the grid margin */
+    width: calc(104% + 40px);
+  }
+
+  .whatsNew-message-date + .whatsNew-message-body::before {
+    display: none;
+  }
+
+  .whatsNew-message-date {
+    font-size: .85em;
+    margin: -12px;
+    margin-top: 0;
+    margin-inline-start: 0;
+    padding: 6px 16px;
+    background: var(--arrowpanel-dimmed);
+  }
+
+  .whatsNew-message-body {
+    padding: 5px 0 10px;
+    margin: 10px 16px;
+    text-align: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  .whatsNew-message-body.has-icon {
+    display: grid;
+    grid-template-columns: auto 32px;
+    grid-template-rows: 0;
+    grid-gap: 0 8px;
+  }
+
+  .whatsNew-message-icon {
+    height: 32px;
+    width: 32px;
+    margin: 14px auto;
+    display: grid;
+    grid-column-start: 2;
+  }
+
+  .whatsNew-message-subtitle {
+    margin: 2px 0;
+    font-size: .8em;
+    color: #949494;
+    font-weight: normal;
+    grid-column-start: 1;
+  }
+
+  .whatsNew-message-content {
+    display: grid;
+    margin: 5px 0 10px;
+    grid-column-start: 1;
+  }
+
+  .text-link {
+    background: none;
+    border: 0;
+    color: #45a1ff;
+    cursor: pointer;
+    font-size: .9em;
+    grid-column-start: 1;
+
+    &:hover {
+      color: #0a84ff;
+      text-decoration: underline;
+
+      &:active {
+        color: #0060df;
+      }
+    }
+  }
+}
+
+#PanelUI-whatsNew .whatsNew-message-title,
+#protections-popup-message .whatsNew-message-title {
+  display: grid;
+  font-size: 1.3em;
+  font-weight: 600;
+  line-height: 1.4em;
+  margin: 14px 0 0;
+  grid-column-start: 1;
+}
+
+#customizationui-widget-panel {
+  /* In the next two rules the panel's width is set according to the
+  * profiler backdrop image when not opened from the overflow panel. */
+  #PanelUI-profiler {
+    min-width: 319px;
+    max-width: 319px;
+  }
+
+  &[viewId="PanelUI-profiler"] {
+    --panel-width: 319px;
+   }
+
+   /* Override themes for the Pocket panel, because the Pocket
+   panel currently only supports dark and light themes. */
+  @media not (prefers-color-scheme: dark){
+    &[viewId="PanelUI-savetopocket"] {
+      --arrowpanel-background: #fbfbfb;
+    }
+  }
+}
+
+:where(#PanelUI-profiler) :is(description, label) {
+  margin: 0;
+}
+
+#PanelUI-profiler-header {
+  &[isinfocollapsed="false"] {
+    background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
+    color: #fff;
+    /* Set custom hover/focus/active states on the info button,
+       to make them more visible on the header background */
+    --panel-item-hover-bgcolor: #0005;
+    --panel-item-active-bgcolor: #0007;
+
+     &:-moz-locale-dir(rtl) {
+      background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
+    }
+
+    :is(button, toolbarbutton):focus-visible {
+      outline-color: currentColor;
+    }
+
+    toolbarseparator {
+      border-color: #0003;
+    }
+  }
+
+  &[isinfocollapsed="true"] #PanelUI-profiler-info {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* The header has an attribute "animationready" that is either set to "true" or to
+   "false". When the DOM is being initialized it is set to "false" so that animations
+   do not run. */
+  &[animationready="true"] #PanelUI-profiler-info {
+    transition: margin-block-end 250ms, opacity 250ms;
+  }
+}
+
+#PanelUI-profiler-info {
+  min-height: 180px;
+  padding: 0 15px 15px;
+  background: top 10px right no-repeat
+    url("chrome://browser/skin/profiler-popup-backdrop.png");
+  opacity: 1;
+}
+
+#PanelUI-profiler-content {
+  position: relative;
+  padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px;
+}
+
+.PanelUI-profiler-description-title {
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-block: 2px;
+}
+
+.PanelUI-profiler-description {
+  margin-block: 4px;
+}
+
+#PanelUI-profiler-learn-more {
+  margin-top: 4px;
+  color: #fff;
+  text-decoration: underline;
+
+  &:hover:active {
+    color: #fffc;
+  }
+}
+
+#PanelUI-profiler-presets {
+  margin: 8px 0;
+
+  &[disabled="true"]::part(label-box) {
+    opacity: 0.5;
+  }
+}
+
+#PanelUI-profiler-content-edit-settings {
+  font-size: .9em;
+}
+
+.PanelUI-profiler-content-label {
+  font-weight: 600;
+}
+
+#PanelUI-profiler-content-description {
+  margin-block: 4px;
+  font-size: .9em;
+  color: var(--text-color-deemphasized);
+}
+
+#PanelUI-profiler-content-recording:not([hidden]) {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  gap: 13px;
+  padding-block: 28px;
+  font-size: 1.3em;
+}
+
+.PanelUI-profiler-recording-icon {
+  width: 42px;
+  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.3;
+}
+
+.PanelUI-profiler-button {
+  appearance: none;
+  background-color: var(--button-bgcolor);
+  border-radius: 4px;
+  color: var(--button-color);
+  padding: 8px;
+  margin: 0 5px;
+
+  &:hover {
+    background-color: var(--button-hover-bgcolor);
+    &:active {
+      background-color: var(--button-active-bgcolor);
+    }
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+}
+
+.PanelUI-profiler-button-primary {
+  background-color: var(--button-primary-bgcolor);
+  color: var(--button-primary-color);
+
+  &:hover {
+    background-color: var(--button-primary-hover-bgcolor);
+    &:active {
+      background-color: var(--button-primary-active-bgcolor);
+    }
+  }
+}
+
+.PanelUI-profiler-shortcut {
+  padding-block-start: 5px;
+  opacity: 0.5;
+  text-align: center;
+}
+
+.PanelUI-profiler-buttons {
+  margin: 7px 10px 0;
+}
+
+.PanelUI-profiler-info-icon {
+  margin-inline-end: 10px;
+  margin-block-start: 25px;
+  width: 50px;
+  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  -moz-context-properties: fill;
+  fill: #fff;
+}
+
+/* Web-extension pop-ups */
+
+.cui-widget-panelview[id^=PanelUI-webext-] {
+  border-radius: var(--arrowpanel-border-radius);
+}
+
+.webextension-popup-browser,
+.webextension-popup-stack {
+  border-radius: inherit;
+}
+
+.webextension-popup-stack {
+  position: relative;
+}
+
+/* Reset/Restart Private Browsing Panel */
+
+#reset-pbm-panel {
+  max-width: var(--menu-panel-width-wide);
+}
+
+#reset-pbm-panel-container {
+  padding: 16px 16px 0;
+  gap: 8px;
+}
+
+#reset-pbm-panel-header > description {
+  margin-bottom: 0;
+}
+
+#reset-pbm-panel-header > description,
+#reset-pbm-panel-description,
+#reset-pbm-panel-footer {
+  margin-inline: 0;
+}
+
+#reset-pbm-panel-header > description {
+  font-weight: var(--font-weight-bold);
+}
+
+#reset-pbm-panel-checkbox {
+  margin-inline: 0 8px;
+}
+
+/* Report Broken Site panels */
+
+/* Hide the Report Broken Site menu item that
+ * is on the App Menu's Help sub-menu.
+ */
+#appMenu_help_reportBrokenSite {
+  display: none;
+}
+
+.report-broken-site-view {
+  description,
+  label,
+  menulist,
+  input,
+  textarea {
+    margin: 0;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  select {
+    /* copied/adapted from toolkit/themes/shared/menulist-shared.css */
+    appearance: none;
+    background-color: var(--button-bgcolor, ButtonFace);
+    color: var(--button-color, ButtonText);
+    border-radius: 4px;
+    padding: 6px 16px;
+    margin: 5px 2px 3px;
+
+    font: menu;
+    font-weight: 600;
+    border: none;
+
+    background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+    background-position: right 10px center;
+    padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+
+    &:-moz-locale-dir(rtl) {
+      background-position: left 10px center;
+    }
+
+    &:hover {
+      background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
+    }
+
+    &:hover:active {
+      background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
+    }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+    }
+  }
+
+  input,
+  textarea {
+    appearance: none;
+    background-color: var(--panel-background);
+    padding: 0.25em;
+    border: 1px solid var(--panel-separator-color);
+    border-radius: 4px;
+
+    &:focus-visible {
+      border-color: transparent;
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
+    }
+  }
+
+  input:user-invalid:not(:focus-visible),
+  select:user-invalid:not(:focus-visible) {
+    border-color: transparent;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    outline-color: var(--color-error-outline);
+  }
+
+  > .panel-subview-body > label {
+    margin-block: 1.5em 0.5em;
+
+    &.invalid-message {
+      margin-block: 0.5em 0;
+      background-image: url("chrome://global/skin/icons/error.svg");
+      background-position: left center;
+      background-repeat: no-repeat;
+      -moz-context-properties: fill;
+      fill: var(--icon-color-critical);
+      padding-inline-start: calc(16px + 0.25em);
+
+      &:-moz-locale-dir(rtl) {
+        background-position-x: right;
+      }
+
+      display: none;
+
+      input:user-invalid + &,
+      select:user-invalid + & {
+        display: block;
+      }
+    }
+  }
+
+  &.main-view {
+    p {
+      margin-block: 0;
+    }
+
+    a {
+      margin-top: 1.5em;
+    }
+  }
+
+  &.sent-view {
+    @media not (prefers-contrast) {
+      background-color: var(--color-background-success);
+    }
+
+    > .panel-header {
+      --arrowpanel-header-additional-element-width: 16px;
+
+      > .checkmark-icon {
+        list-style-image: url(chrome://global/skin/icons/check-filled.svg);
+        -moz-context-properties: fill;
+        fill: #2ac3a2;
+      }
+    }
+
+    > .panel-subview-body {
+      /* Don't let the footer appear way down in the panel while there's
+       * almost no content above. */
+      flex: 0 auto;
+
+      > .subview-subheader {
+        font-size: inherit;
+      }
+    }
+  }
+}
+
+#report-broken-site-panel-container {
+  padding: 8px 16px 16px;
+}