uc-app-menu.css

/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this stylesheet focuses on the app menu.
(the menu opened by the PanelUI hamburger button at the far right end of the toolbar) */

#PanelUI-menu-button {
  padding-inline: var(--toolbarbutton-outer-padding) !important;
}

#PanelUI-menu-button[badge-status=""] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: none !important;
}

#PanelUI-menu-button[badge-status^="update"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: var(--update-badge-bg) url(chrome://userchrome/content/update-icon-inverted.svg) no-repeat center/contain !important;
  background-clip: border-box !important;
  fill: var(--update-badge-color) !important;
  border: 1px solid transparent !important;
  border-radius: 100% !important;
  -moz-context-properties: fill !important;
  padding: 0 !important;
  margin-inline: auto -4px !important;
  margin-block: -7px auto !important;
}

:root:not([customizing]) #PanelUI-menu-button[badge-status^="update"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  fill: transparent !important;
  background-color: var(--update-badge-inactive) !important;
}

:root:not([customizing]) #PanelUI-menu-button[badge-status^="update"]:is(:hover, [open]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  background-color: var(--update-badge-bg) !important;
  fill: var(--update-badge-color) !important;
}

.panel-banner-item[notificationid^="update"]::after {
  display: none !important;
}

.panel-banner-item[notificationid^="update"] > .toolbarbutton-icon {
  background: var(--update-badge-bg) url(chrome://userchrome/content/update-icon-inverted.svg) no-repeat center/contain !important;
  background-clip: border-box !important;
  fill: var(--update-badge-color) !important;
  border: 1px solid transparent;
  border-radius: 100% !important;
  -moz-context-properties: fill !important;
  min-width: 16px !important;
  min-height: 16px !important;
  width: unset !important;
  height: unset !important;
  box-sizing: content-box !important;
  padding: 0 !important;
}

.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: var(--update-badge-bg) url(chrome://userchrome/content/update-icon-inverted.svg) no-repeat center/contain !important;
  fill: var(--update-badge-color) !important;
  transform: scaleY(-1);
}

.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: var(--update-badge-bg) url(chrome://userchrome/content/more.svg) no-repeat center/75% !important;
  fill: var(--update-badge-color) !important;
}

.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon,
#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: var(--update-badge-bg) url(chrome://userchrome/content/check.svg) no-repeat center/contain !important;
  fill: var(--update-badge-color) !important;
}

.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon,
#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-unsupported"]:is(:hover, [open]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  background: var(--low-warning-icon-background) url(chrome://userchrome/content/check-partial.svg) no-repeat center/contain !important;
  fill: var(--low-warning-icon-detail) !important;
}

#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  filter: none !important;
  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: url(chrome://userchrome/content/skin/controlcenter/warning.svg) no-repeat center/contain !important;
  stroke: var(--low-warning-icon-detail) !important;
  fill: var(--low-warning-icon-background) !important;
  -moz-context-properties: fill, stroke !important;
  margin: -7px 0 0 !important;
  margin-inline-end: -6px !important;
}

#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: url(chrome://userchrome/content/material/extension.svg) no-repeat center/contain !important;
  stroke: var(--low-warning-icon-detail) !important;
  fill: var(--low-warning-icon-background) !important;
  -moz-context-properties: fill, stroke !important;
  margin: -8px 0 0 !important;
  margin-inline-end: -6px !important;
}

#PanelUI-menu-button[badge-status="fxa-needs-authentication"] {
  list-style-image: url(chrome://userchrome/content/skin/menu-triangular-badged.svg) !important;
}

#PanelUI-menu-button[badge-status="addon-alert"],
#PanelUI-menu-button[badge-status="update-unsupported"] {
  list-style-image: url(chrome://userchrome/content/skin/menu-badged.svg) !important;
}

#PanelUI-menu-button:where([badge-status="script-updates-available"], [badge-status="script-updates-restart"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  fill: var(--update-badge-bg) !important;
  stroke: var(--update-badge-bg) !important;
}

:root:not([customizing]) #PanelUI-menu-button[badge-status="addon-alert"]:not(:hover, [open]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  fill: var(--update-badge-inactive) !important;
}

:root:not([customizing]) #PanelUI-menu-button[badge-status="fxa-needs-authentication"]:not(:hover, [open]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  fill: var(--update-badge-inactive) !important;
  stroke: transparent !important;
}

:root:not([customizing]) #PanelUI-menu-button:where([badge-status="script-updates-available"], [badge-status="script-updates-restart"]):not(:hover, [open]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  fill: var(--update-badge-inactive) !important;
  stroke: var(--update-badge-inactive) !important;
}

#PanelUI-menu-button[badge-status="extension-new-tab"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: none;
}

/* add icons to non-iconized appmenu items */
.subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
}

#appMenu-save-file-button2 {
  list-style-image: url(chrome://userchrome/content/skin/save.svg);
}

#appMenu-more-button2 {
  list-style-image: url(chrome://userchrome/content/skin/developer.svg);
}

#appMenu-help-button2 {
  list-style-image: url(chrome://userchrome/content/skin/tip.svg);
}

#appMenu-new-window-button2 {
  list-style-image: url(chrome://userchrome/content/skin/new-window.svg);
}

#appMenu-new-tab-button2 {
  list-style-image: url(chrome://userchrome/content/skin/new-tab.svg);
}

#appMenu-new-private-window-button2 {
  list-style-image: url(chrome://userchrome/content/skin/new-private.svg);
}

#appMenu-print-button2 {
  list-style-image: url(chrome://global/skin/icons/print.svg);
}

#appMenu-passwords-button {
  list-style-image: url(chrome://userchrome/content/skin/login.svg);
}

#appMenu-bookmarks-button {
  list-style-image: url(chrome://userchrome/content/skin/bookmark.svg);
}

#appMenu-history-button {
  list-style-image: url(chrome://userchrome/content/skin/history.svg);
}

#appMenu-downloads-button {
  list-style-image: url(chrome://userchrome/content/downloads/download-icons.svg#arrow-with-bar);
}

#appMenu-extensions-themes-button {
  list-style-image: url(chrome://userchrome/content/material/extension.svg);
}

#appMenu-userChrome-button {
  list-style-image: url(chrome://browser/skin/trending.svg);
}

#appMenu-find-button2,
#panelMenu_searchBookmarks {
  list-style-image: url(chrome://userchrome/content/search-glass.svg);
}

#appMenu-translate-button {
  list-style-image: url(chrome://userchrome/content/material/translate.svg);
}

#panelMenu_bookmarkingTools {
  list-style-image: url(chrome://userchrome/content/skin/developer.svg);
}

#panelMenu_viewBookmarksToolbar {
  list-style-image: url(chrome://userchrome/content/skin/bookmarks-toolbar.svg);
}

#panelMenuBookmarkThisPage[data-l10n-id="bookmarks-subview-bookmark-tab"] {
  list-style-image: url(chrome://userchrome/content/skin/bookmark-hollow.svg);
}

#panelMenuBookmarkThisPage[data-l10n-id="bookmarks-subview-edit-bookmark"] {
  list-style-image: url(chrome://userchrome/content/skin/bookmark.svg);
}

#panelMenu_showAllBookmarks {
  list-style-image: url(chrome://userchrome/content/skin/library.svg);
}

#panelMenu_showAllBookmarks .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px) !important;
}

#PanelUI-fxa-menu-remotetabs-button,
#appMenuRecentlyClosedTabs {
  list-style-image: url(chrome://userchrome/content/skin/tab.svg);
}

#appMenuClearRecentHistory {
  list-style-image: url(chrome://userchrome/content/skin/forget.svg);
}

#appMenuClearRecentHistory:-moz-locale-dir(rtl) .toolbarbutton-icon {
  transform: scaleX(-1);
}

#appMenu-restoreSession {
  list-style-image: url(chrome://userchrome/content/skin/restore-session.svg);
}

#appMenuRecentlyClosedWindows {
  list-style-image: url(chrome://userchrome/content/skin/window.svg);
}

#appMenuSearchHistory {
  list-style-image: url(chrome://userchrome/content/search-glass.svg);
}

:is(#appMenu-library-recentlyClosedTabs, #appMenu-library-recentlyClosedWindows) .restoreallitem {
  list-style-image: url(chrome://userchrome/content/skin/restore-session.svg);
}

#PanelUI-historyMore {
  list-style-image: url(chrome://userchrome/content/skin/sort.svg);
}

#appMenu-settings-button {
  list-style-image: url(chrome://userchrome/content/settings.svg);
}

#appMenu-advanced-settings-button {
  list-style-image: url(chrome://userchrome/content/material/tune.svg);
}

#appmenu-moreTools-button {
  list-style-image: url(chrome://browser/skin/customize.svg);
}

#appMenu-quit-button2 {
  list-style-image: url(chrome://userchrome/content/skin/quit.svg);
}

#appMenu-restart-button2 {
  list-style-image: url(chrome://userchrome/content/skin/reload.svg);
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[checked="true"] .toolbarbutton-icon {
  list-style-image: url(chrome://userchrome/content/check.svg) !important;
  background-color: var(--checkbox-checked-bgcolor);
  border: 1px solid var(--checkbox-checked-border-color);
  border-radius: 2px;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[checked="true"]:is(:hover, :focus-visible):not([open]) .toolbarbutton-icon {
  background-color: var(--checkbox-checked-hover-bgcolor);
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[checked="true"]:is(:hover:active, [open]) .toolbarbutton-icon {
  background-color: var(--checkbox-checked-active-bgcolor);
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Web Developer Tools"i]:not([checked="true"]) {
  list-style-image: url(chrome://userchrome/content/devtools/debugging-workers.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Task Manager"i] {
  list-style-image: url(chrome://userchrome/content/devtools/tool-profiler.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Remote Debugging"i] {
  list-style-image: url(chrome://userchrome/content/material/remote.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Browser Toolbox"i] {
  list-style-image: url(chrome://userchrome/content/skin/toolbox.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Browser Content Toolbox"i] {
  list-style-image: url(chrome://userchrome/content/devtools/command-frames.svg) !important;
  fill-opacity: 0 !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Browser Console"i] {
  list-style-image: url(chrome://userchrome/content/devtools/command-console.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Responsive Design Mode"i]:not([checked="true"]) {
  list-style-image: url(chrome://userchrome/content/devtools/command-responsivemode.svg) !important;
  fill-opacity: 0 !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Eyedropper"i] {
  list-style-image: url(chrome://userchrome/content/devtools/command-eyedropper.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Page Source"i] {
  list-style-image: url(chrome://userchrome/content/devtools/tool-dom.svg) !important;
}

:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton[label="Extensions for Developers"i] {
  list-style-image: url(chrome://userchrome/content/mozilla-logo.svg) !important;
}

#appMenu-fxa-label2::before {
  display: flex;
  content: "";
  background-image: var(--fxa-ui-img, url(chrome://userchrome/content/fxa/avatar-big.svg));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  fill: currentColor;
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, fill-opacity;
}

#appMenu_menu_openHelp {
  list-style-image: url(chrome://userchrome/content/help-solid.svg);
}

#appMenu_feedbackPage {
  list-style-image: url(chrome://userchrome/content/material/rate.svg);
}

#appMenu_helpSafeMode {
  list-style-image: url(chrome://userchrome/content/material/diagnostic.svg);
}

#appMenu_troubleShooting {
  list-style-image: url(chrome://userchrome/content/material/system-report.svg);
}

#appMenu_help_reportSiteIssue {
  list-style-image: url(chrome://userchrome/content/material/bug.svg);
}

#appMenu_menu_HelpPopup_reportPhishingtoolmenu .toolbarbutton-icon {
  list-style-image: url(chrome://userchrome/content/material/phishing.svg);
  stroke: currentColor !important;
  -moz-context-properties: fill, fill-opacity, stroke !important;
}

#appMenu_menu_HelpPopup_reportPhishingErrortoolmenu {
  list-style-image: url(chrome://userchrome/content/material/verified.svg);
}

#appMenu_aboutName {
  list-style-image: url(chrome://userchrome/content/identity-icons-brand.svg);
}

#appMenu_helpSwitchDevice {
  list-style-image: url(chrome://userchrome/content/skin/import.svg);
}

#appMenu_helpPolicySupport::before {
  background-image: url(chrome://userchrome/content/help-square.svg);
}

.panel-banner-item > .toolbarbutton-text,
.addon-banner-item > .toolbarbutton-text,
#appMenu-save-file-button2 > .toolbarbutton-text,
#appMenu-more-button2 > .toolbarbutton-text,
#appMenu-help-button2 > .toolbarbutton-text,
#appMenu-new-window-button2 > .toolbarbutton-text,
#appMenu-new-tab-button2 > .toolbarbutton-text,
#appMenu-new-private-window-button2 > .toolbarbutton-text,
#appMenu-print-button2 > .toolbarbutton-text,
#appMenu-passwords-button > .toolbarbutton-text,
#appMenu-bookmarks-button > .toolbarbutton-text,
#appMenu-history-button > .toolbarbutton-text,
#appMenu-downloads-button > .toolbarbutton-text,
#appMenu-extensions-themes-button > .toolbarbutton-text,
#appMenu-userChrome-button > .toolbarbutton-text,
#appMenu-find-button2 > .toolbarbutton-text,
#panelMenu_searchBookmarks > .toolbarbutton-text,
#appMenu-translate-button > .toolbarbutton-text,
#panelMenuBookmarkThisPage > .toolbarbutton-text,
#panelMenu_viewBookmarksToolbar > .toolbarbutton-text,
#panelMenu_bookmarkingTools > .toolbarbutton-text,
#PanelUI-fxa-menu-remotetabs-button > .toolbarbutton-text,
#appMenuRecentlyClosedTabs > .toolbarbutton-text,
#appMenuClearRecentHistory > .toolbarbutton-text,
#appMenu-restoreSession > .toolbarbutton-text,
#appMenuRecentlyClosedWindows > .toolbarbutton-text,
#appMenuSearchHistory > .toolbarbutton-text,
:is(#appMenu-library-recentlyClosedTabs, #appMenu-library-recentlyClosedWindows) .restoreallitem > .toolbarbutton-text,
#PanelUI-historyMore > .toolbarbutton-text,
#appMenu-settings-button > .toolbarbutton-text,
#appMenu-advanced-settings-button > .toolbarbutton-text,
#appmenu-moreTools-button > .toolbarbutton-text,
#appMenu-quit-button2 > .toolbarbutton-text,
#appMenu-restart-button2 > .toolbarbutton-text,
#appMenu-zoom-controls > .toolbarbutton-text,
#appMenu-fxa-status2 :is(label, div),
:is(#appmenu-developer-tools-view, #PanelUI-developer-tools-view) toolbarbutton .toolbarbutton-text,
#appMenu_menu_openHelp > .toolbarbutton-text,
#appMenu_feedbackPage > .toolbarbutton-text,
#appMenu_helpSafeMode > .toolbarbutton-text,
#appMenu_troubleShooting > .toolbarbutton-text,
#appMenu_help_reportSiteIssue > .toolbarbutton-text,
#appMenu_menu_HelpPopup_reportPhishingtoolmenu > .toolbarbutton-text,
#appMenu_menu_HelpPopup_reportPhishingErrortoolmenu > .toolbarbutton-text,
#appMenu_aboutName > .toolbarbutton-text,
#appMenu_helpSwitchDevice > .toolbarbutton-text,
#appMenu_helpPolicySupport > .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px) !important;
}

#appMenu-zoom-controls::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  background-image: url(chrome://userchrome/content/fxa/add-device.svg);
}

:is(#appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) > .toolbarbutton-icon {
  background-color: unset !important;
  fill: currentColor !important;
  -moz-context-properties: fill, fill-opacity !important;
  padding: 0 !important;
}

#appMenu-zoom-controls :is(#appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2, #appMenu-zoomReset-button2):not([disabled], [open]):is(:hover, :focus-visible) {
  background-color: var(--arrowpanel-dimmed) !important;
  border-color: transparent !important;
}

#appMenu-zoom-controls :is(#appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2, #appMenu-zoomReset-button2):not([disabled]):is([open], :hover:active) {
  background-color: var(--arrowpanel-dimmed-further) !important;
}

#appMenu-zoom-controls toolbarbutton {
  margin-inline: 4px !important;
  border: 1px solid transparent !important;
  min-height: 20px !important;
  min-width: 20px !important;
  width: unset !important;
  padding: 4px !important;
}

#appMenu-zoom-controls .toolbarbutton-icon {
  width: 12px !important;
  height: 12px !important;
}

#appMenu-zoom-controls :where(.toolbarbutton-icon, .toolbarbutton-text) {
  outline: none !important;
}

#appMenu-zoom-controls #appMenu-zoomReset-button2 {
  border: 1px solid var(--desaturate-dimmed) !important;
  background-color: var(--uc-arrowpanel-very-faint) !important;
  border-radius: 10px !important;
  padding: 0 4px !important;
  height: 20px !important;
  min-height: 20px !important;
  min-width: calc(6ch + 8px) !important;
}

#appMenu-zoom-controls #appMenu-zoomReset-button2[disabled] {
  background-color: transparent !important;
  border-color: transparent !important;
}

#appMenu-zoom-controls #appMenu-zoomReset-button2 .toolbarbutton-text {
  margin-block: 1px !important;
  margin-inline: 6px !important;
  background: none !important;
  text-align: center !important;
}

#appMenu-zoomEnlarge-button2 {
  list-style-image: url(chrome://userchrome/content/skin/zoom-in.svg) !important;
}

#appMenu-zoomReduce-button2 {
  list-style-image: url(chrome://userchrome/content/skin/zoom-out.svg) !important;
}

#appMenu-fullscreen-button2 {
  list-style-image: url(chrome://userchrome/content/skin/fullscreen.svg) !important;
}

#appMenu-fullscreen-button2[checked] {
  list-style-image: url(chrome://userchrome/content/skin/fullscreen-exit.svg) !important;
}

toolbarseparator.proton-zap {
  opacity: 0.7 !important;
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.panels.vibrant-fxa-banner") {
  #appMenu-fxa-status2 > #appMenu-fxa-label2,
  [mainViewId="PanelUI-fxa"] #fxa-manage-account-button {
    background-image: linear-gradient(-90deg, hsla(259.9, 100%, 67.5%, 0.275) 0%, hsla(330.8, 100%, 64.5%, 0.275) 52.08%, hsla(37.5, 100%, 65.5%, 0.275) 100%);
  }

  toolbarseparator.proton-zap {
    border-image: none !important;
    opacity: 1 !important;
  }
}

#appMenu-fxa-status2 > #appMenu-fxa-label2 label {
  font-weight: inherit !important;
  margin-block: 0 !important;
}

#appMenu-fxa-status2 > #appMenu-fxa-label2 label:not([hidden="true"]) + label {
  color: var(--panel-shortcut-color);
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.css.mac-ui-fonts") {
  #appMenu-fxa-text,
  #appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description,
  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
    font-weight: var(--uc-font-weight-bold) !important;
  }
}

#appMenu-fxa-status2:not([fxastatus]) {
  margin-inline-end: 0 !important;
  padding-inline-end: var(--arrowpanel-menuitem-margin-inline) !important;
  padding-block: 0 !important;
}

#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
  padding: 5px 12px !important;
  min-height: 29px !important;
  font-size: 1em !important;
}

#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2::before {
  display: none !important;
}

#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 #appMenu-header-description {
  padding: 0 !important;
}

#appMenu-fxa-status2:not([fxastatus])::before {
  -moz-context-properties: fill, fill-opacity;
  content: url(chrome://userchrome/content/fxa/avatar-big.svg);
  fill: currentColor;
  display: flex;
}

#fxa-manage-account-button {
  padding-block: 0 !important;
  padding-inline: 8px !important;
  min-height: 43px !important;
  box-sizing: border-box;
}

#fxa-manage-account-button #fxa-menu-avatar {
  list-style-image: var(--avatar-image-url);
  display: -moz-inline-box;
  order: 2;
  margin-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px);
  height: 28px !important;
  width: 28px !important;
  -moz-context-properties: fill, fill-opacity;
  fill: var(--arrowpanel-color);
}

:root[fxastatus="signedin"] #fxa-manage-account-button::after {
  content: "";
  display: -moz-inline-box;
  width: 28px;
  height: 28px;
  margin-inline: var(--arrowpanel-subviewbutton-iconic-gap, 8px) 0;
  background: var(--avatar-image-url) center/contain no-repeat;
  -moz-context-properties: fill, fill-opacity;
  fill: var(--arrowpanel-color);
  border-radius: 100%;
}

:root[fxastatus="signedin"] #fxa-menu-avatar,
:root[fxastatus="signedin"] #fxa-avatar-image {
  border-radius: 50%;
}

#fxa-menu-header-description,
#fxa-menu-header-title {
  margin-block: 0 !important;
}

.subviewbutton .syncnow-label {
  text-align: start;
  display: flex;
  margin: 0;
}

#PanelUI-fxa-menu-syncnow-button label,
#PanelUI-fxa-menu-setup-sync-button .toolbarbutton-text,
#PanelUI-fxa-menu-connect-device-button .toolbarbutton-text,
#PanelUI-fxa-menu-sendtab-button .toolbarbutton-text,
#PanelUI-fxa-menu-sync-prefs-button .toolbarbutton-text,
#PanelUI-fxa-menu-account-signout-button .toolbarbutton-text,
#PanelUI-remotetabs-syncnow .syncnow-label {
  padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px) !important;
}

#PanelUI-fxa-menu-syncnow-button image,
#PanelUI-remotetabs-syncnow image {
  list-style-image: url(chrome://userchrome/content/skin/sync.svg) !important;
  order: unset !important;
  visibility: unset !important;
  transition: fill 0.8s var(--uc-smooth-timing-function);
  transform-style: preserve-3d;
}

#PanelUI-fxa-menu-setup-sync-button {
  list-style-image: url(chrome://userchrome/content/skin/sync.svg);
}

#PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon {
  list-style-image: url(chrome://userchrome/content/fxa/add-device.svg);
  width: 16px;
  height: 16px;
}

#PanelUI-fxa-menu-sendtab-button {
  list-style-image: url(chrome://userchrome/content/skin/send-to-device.svg);
}

#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) .toolbarbutton-icon {
  transform: scaleX(-1);
}

#PanelUI-fxa-menu-sync-prefs-button {
  list-style-image: url(chrome://userchrome/content/settings.svg);
}

#PanelUI-fxa-menu-account-signout-button {
  list-style-image: url(chrome://userchrome/content/fxa/sign-out.svg);
}

#PanelUI-remotetabs-view-managedevices {
  padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + var(--arrowpanel-subviewbutton-iconic-gap, 8px)) !important;
  background-image: url(chrome://userchrome/content/fxa/avatar-big.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: var(--arrowpanel-menuitem-padding-inline) center;
  fill: currentColor;
  -moz-context-properties: fill, fill-opacity;
}

toolbarbutton.subviewbutton.sendToDevice-device[clientType=""][clientId=""] {
  list-style-image: url(chrome://userchrome/content/chevron.svg);
}

toolbarbutton.subviewbutton.sendToDevice-device[clientType=""][clientId=""] + toolbarbutton.subviewbutton.sendToDevice-device:not([clientType], [clientId]) {
  list-style-image: url(chrome://userchrome/content/fxa/add-device.svg);
}

toolbarbutton.subviewbutton.sendToDevice-device[clientType=""][clientId=""] .toolbarbutton-text,
toolbarbutton.subviewbutton.sendToDevice-device[clientType=""][clientId=""] + toolbarbutton.subviewbutton.sendToDevice-device:not([clientType], [clientId]) .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px);
}

.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
  padding: 4px;
  font-size: 11px;
}

.panel-banner-item {
  padding: calc(var(--arrowpanel-menuitem-padding-block) + 2px) var(--arrowpanel-menuitem-padding-inline) !important;
  margin: var(--arrowpanel-menuitem-margin) !important;
  font-weight: inherit !important;
  min-height: 40px !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}

.addon-banner-item {
  padding: calc(var(--arrowpanel-menuitem-padding-block) + 2px) var(--arrowpanel-menuitem-padding-inline) !important;
  margin: var(--arrowpanel-menuitem-margin) !important;
  margin-bottom: 4px !important;
  align-items: center !important;
  font-weight: inherit !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  min-height: 40px !important;
  --panel-banner-item-color: #f9f9fa;
  --panel-banner-item-background-color: var(--eom-warning-bg);
  --panel-banner-item-hover-bgcolor: var(--eom-warning-bg-hover);
  --panel-banner-item-active-bgcolor: var(--eom-warning-bg-active);
}

.addon-banner-item::after {
  order: 0 !important;
  margin: 0 !important;
}

.addon-banner-item > .toolbarbutton-text {
  order: 2 !important;
}

.panel-banner-item:not(.addon-banner-item) {
  margin: var(--arrowpanel-menuitem-margin) !important;
  margin-bottom: 4px !important;
  align-items: center !important;
  --panel-banner-item-color: black;
  --panel-banner-item-background-color: hsla(96, 65%, 75%, 0.5);
  --panel-banner-item-hover-bgcolor: hsla(96, 65%, 75%, 0.8);
  --panel-banner-item-active-bgcolor: hsl(96, 65%, 75%);
}

:root[lwt-popup="dark"] .panel-banner-item:not(.addon-banner-item) {
  --panel-banner-item-color: #f9f9fa;
  --panel-banner-item-background-color: rgba(48, 230, 11, 0.1);
  --panel-banner-item-hover-bgcolor: rgba(48, 230, 11, 0.15);
  --panel-banner-item-active-bgcolor: rgba(48, 230, 11, 0.2);
}

#appMenu-popup toolbarseparator {
  margin-inline: var(--arrowpanel-menuitem-margin-inline) !important;
}

:is(.addon-banner-item, .panel-banner-item) > .toolbarbutton-icon {
  order: 0 !important;
}

#appMenu-popup .panel-banner-item:not([disabled]):focus-visible,
#appMenu-popup .addon-banner-item:not([disabled]):focus-visible {
  background-color: var(--panel-banner-item-hover-bgcolor) !important;
}