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

%filter substitution

%define menuPanelWidth 22.35em
%define wideMenuPanelWidth 29em
%define standaloneSubviewWidth 30em
%define buttonStateHoverOrFocus :not([disabled],[open],:active):is(:hover,:focus)
%define buttonStateHover :not([disabled],[open],:active):is(:hover)
%define buttonStateFocus :not([disabled],[open],:active):is(:focus)
%define menuStateHover :not([disabled],:active)[_moz-menuactive]
%define buttonStateActive :not([disabled]):is([open],:hover:active)
%define menuStateActive :not([disabled])[_moz-menuactive]:active
%define menuStateMenuActive :not([disabled])[_moz-menuactive]
%define inAnyPanel :is(:not([cui-areatype="toolbar"]), [overflowedItem=true])
%define panelPaletteIconSize 16px

%define appmenuWarningBackgroundColor #FFEFBF
%define appmenuWarningBackgroundColorHover #FFE8A2
%define appmenuWarningBackgroundColorActive #FFE38F
%define appmenuWarningColor black
%define appmenuWarningBorderColor hsl(45,100%,77%)

%define appmenuWarningBackgroundColorBrightText hsla(55,100%,50%,.1)
%define appmenuWarningBackgroundColorHoverBrightText hsla(55,100%,50%,.15)
%define appmenuWarningBackgroundColorActiveBrightText hsla(55,100%,50%,.2)
%define appmenuWarningColorBrightText #F9F9FA

:root {
  --arrowpanel-menuitem-margin: 0;
  --arrowpanel-menuitem-padding: 4px 12px;
  --arrowpanel-menuitem-border-radius: unset;
  --panel-separator-margin: 6px 0;
  --panel-subview-body-padding: 6px 0;

  --panelview-toolbarbutton-hover-bgcolor: var(--arrowpanel-dimmed);
  --panelview-toolbarbutton-hover-color: inherit;
  --panelview-toolbarbutton-active-bgcolor: var(--arrowpanel-dimmed-further);
  --panelview-toolbarbutton-active-color: inherit;
  --panel-banner-item-color: black;
  --panel-banner-item-background-color: hsla(96,65%,75%,.5);
  --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
  --panel-banner-item-active-bgcolor: hsl(96,65%,75%);
  --panel-banner-item-update-supported-bgcolor: #74BF43;
  --panel-banner-item-update-unsupported-bgcolor: #FFE900;
  --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
  --panel-shortcut-color: inherit;
  --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px -moz-accent-color;
}

:root[lwt-popup-brighttext] {
  --panel-banner-item-color: @appmenuWarningColorBrightText@;
  --panel-banner-item-background-color: rgba(48,230,11,.1);
  --panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
  --panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
}

@supports -moz-bool-pref("browser.proton.enabled") {
:root {
  --arrowpanel-menuitem-margin: 0 8px;
  --arrowpanel-menuitem-padding: 8px;
  --arrowpanel-menuitem-border-radius: 4px;
  --panel-separator-margin: 4px 8px;
  --panel-subview-body-padding: 8px 0;
}

} /*** END proton ***/

@supports not -moz-bool-pref("browser.proton.enabled") {
:root:not([uidensity=compact], [chromehidden~="toolbar"]) #PanelUI-button {
  margin-inline-start: 3px;
  border-inline-start: 1px solid;
  border-image: linear-gradient(
    transparent 4px,
    var(--toolbarseparator-color) 4px,
    var(--toolbarseparator-color) calc(100% - 4px),
    transparent calc(100% - 4px)
  );
  border-image-slice: 1;
}
} /*** END !proton ***/

#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: -moz-box;
  height: 10px;
  width: 10px;
  background-size: contain;
  border: none;
}

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

#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  border-radius: 50%;
  box-shadow: none;
  /* "!important" is necessary to override the rule in toolbarbutton.css */
  margin: -7px 0 0 !important;
  margin-inline-end: -4px !important;
  min-width: 12px;
  min-height: 12px;
}

#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
}

#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: #FFE900 url(chrome://browser/skin/update-badge.svg) no-repeat center;
}

@supports -moz-bool-pref("browser.proton.enabled") {
.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon,
.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon,
.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon {
  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
  border-radius: 50%;
}

.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon {
  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
  border-radius: 50%;
}
}

@supports not -moz-bool-pref("browser.proton.enabled") {
.panel-banner-item[notificationid="update-available"]::after,
.panel-banner-item[notificationid="update-downloading"]::after,
.panel-banner-item[notificationid="update-manual"]::after,
.panel-banner-item[notificationid="update-other-instance"]::after,
.panel-banner-item[notificationid="update-restart"]::after {
  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
  border-radius: 50%;
}

.panel-banner-item[notificationid="update-unsupported"]::after {
  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
  border-radius: 50%;
}
.panel-banner-item[notificationid^=update] {
  list-style-image: url(chrome://branding/content/icon16.png);
}
} /** END not Proton **/

#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 13px;
  background: url(chrome://browser/skin/warning.svg) center / contain no-repeat transparent;
  box-shadow: none;
  border-radius: 0;
  /* Use the included fallbacks defined in the SVG file instead of inheriting from .toolbarbutton-1. */
  -moz-context-properties: none;
}

#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  filter: grayscale(100%);
}

#nav-bar[brighttext] #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#nav-bar[brighttext] #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  -moz-context-properties: fill, stroke;
  fill: #FFE900;
  stroke: transparent;
}

.cui-widget-panel,
#widget-overflow {
  font: menu;
}

panelview {
  -moz-box-orient: vertical;
  -moz-box-flex: 1;
  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. */
panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
  overflow-y: hidden;
}

/* This section is to anchor all the drop down panels at the same height, shift the
  panel`s top margin according to its positioning and the uidensity of the window. */
#downloadsPanel,
#widget-overflow,
#appMenu-popup,
#customizationui-widget-panel,
#identity-popup,
#permission-popup,
#protections-popup {
  margin-top: -6px;
}

/* The difference between the toolbar buttons` padding and the urlbar-icons` padding,
   then subtract 6px. */
#pageActionActivatedActionPanel,
#pageActionPanel,
#editBookmarkPanel,
.browser-extension-panel {
  margin-top: calc(var(--toolbarbutton-inner-padding) - var(--urlbar-icon-padding) - 6px)
}

/* The bookmarks toolbar is too thin to have the panels overlap 6px. */
#downloadsPanel.bookmarks-toolbar,
#widget-overflow.bookmarks-toolbar,
#appMenu-popup.bookmarks-toolbar,
#customizationui-widget-panel.bookmarks-toolbar {
  margin-top: -1px;
}

/* The BMB_bookmarksPopup is unique because it is built into the
   bookmarks-menu-button, resulting in many edge cases. */
#BMB_bookmarksPopup {
  margin-top: -8px;
}

:root:not([uidensity]) #nav-bar #BMB_bookmarksPopup {
  margin-top: -11px;
}

:root[uidensity=touch] #nav-bar #BMB_bookmarksPopup,
:root[uidensity=touch] #TabsToolbar #BMB_bookmarksPopup,
:root[uidensity=compact] #BMB_bookmarksPopup {
  margin-top: -9px;
}

:root[uidensity=compact] #TabsToolbar #BMB_bookmarksPopup {
  margin-top: -7px;
}

#PersonalToolbar #BMB_bookmarksPopup {
  margin-top: -2px
}

:root[uidensity=touch] #PersonalToolbar #BMB_bookmarksPopup {
  margin-top: -5px;
}

.panel-subview-body {
  overflow-y: auto;
  overflow-x: hidden;
  -moz-box-flex: 1;
  padding: var(--panel-subview-body-padding);
}

@supports -moz-bool-pref("browser.proton.enabled") {
  toolbarseparator + .panel-subview-body,
  .subview-subheader + .panel-subview-body {
    padding: 0;
  }
} /** END Proton **/

.panel-view-body-unscrollable {
  overflow: hidden;
  -moz-box-flex: 1;
}

.subviewbutton.panel-subview-footer {
  box-sizing: border-box;
  min-height: 41px;
}

.cui-widget-panelview menuitem.subviewbutton.panel-subview-footer {
  margin: 4px 0 0;
}

.cui-widget-panelview .subviewbutton.panel-subview-footer > .menu-text {
  -moz-box-flex: 1;
}

.panel-info-button {
  appearance: none;
  padding: 0;
  margin-inline-end: 4px;
  border-radius: var(--toolbarbutton-border-radius);
}

.panel-info-button[disabled=true] {
  visibility: hidden;
}

.panel-info-button@buttonStateHoverOrFocus@ {
  background-color: var(--arrowpanel-dimmed);
}

.panel-info-button:not(:hover)[checked] {
  background-color: var(--arrowpanel-dimmed-further);
}

.panel-info-button@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-even-further);
}

.panel-info-button > image {
  list-style-image: url(chrome://global/skin/icons/info.svg);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  padding: 4px;
}

#wrapper-edit-controls:is([place="palette"],[place="menu-panel"]) > #edit-controls,
#wrapper-zoom-controls:is([place="palette"],[place="menu-panel"]) > #zoom-controls {
  margin-inline-start: 0;
}

#BMB_bookmarksPopup {
  max-width: @standaloneSubviewWidth@;
}

#BMB_bookmarksPopup::part(arrowscrollbox) {
  padding: 0;
}

/* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
#BMB_bookmarksPopup menupopup::part(arrowscrollbox) {
  padding-bottom: 0;
}

#BMB_bookmarksPopup menupopup[nofooterpopup=true]::part(arrowscrollbox) {
  padding-bottom: 4px;
}

%ifndef XP_MACOSX
/* Add some space at the top because there are no headers in menupopups of
   the bookmarks menu. */
#BMB_bookmarksPopup menupopup::part(arrowscrollbox-scrollbox) {
  padding-top: 4px;
}
%endif

#confirmation-hint {
  --arrowpanel-background: #0060df;
  --arrowpanel-border-color: #0060df;
  --arrowpanel-color: #fff;
  --arrowpanel-padding: 6px 10px;
  font-weight: 400;
  font-size: 1.1rem;
}

#confirmation-hint::part(arrowcontent) {
  -moz-box-align: center;
}

#confirmation-hint[hidearrow]::part(arrowbox) {
  /* Don't display the arrow but keep the popup at the same vertical
     offset as other arrow panels. */
  visibility: hidden;
}

#confirmation-hint-checkmark-animation-container {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
}

/* Don't show the checkmark if there is a description */
#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container {
  display: none;
}

#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
  display: block;
  position: absolute;
  background-image: url(chrome://browser/skin/success-animation.svg);
  background-repeat: no-repeat;
  min-width: 266px;
  max-width: 266px;
  min-height: 14px;
  max-height: 14px;
  animation-name: confirmation-hint-checkmark-animation;
  animation-fill-mode: forwards;
  animation-timing-function: steps(18);
}

#confirmation-hint[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[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) {
  animation-name: confirmation-hint-checkmark-animation-rtl;
  transform: translateX(252px);
}

@media (prefers-reduced-motion: no-preference) {
  #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
    animation-duration: 300ms;
    animation-delay: 60ms;
  }
}

@keyframes confirmation-hint-checkmark-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-252px);
  }
}

@keyframes confirmation-hint-checkmark-animation-rtl {
  from {
    transform: translateX(252px);
  }
  to {
    transform: translateX(0);
  }
}

#confirmation-hint-message {
  margin-inline: 7px 0;
}

#confirmation-hint.with-description #confirmation-hint-message {
  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] + #confirmation-hint-message-container {
    transform: scale(1);
    opacity: 1;
  }
}

panelview[id^=PanelUI-webext-] {
  overflow: hidden;
}

panelview:not([mainview]) .toolbarbutton-text,
.cui-widget-panel .toolbarbutton-text,
#overflowMenu-customize-button > .toolbarbutton-text {
  text-align: start;
  display: -moz-box;
}

.cui-widget-panel,
.cui-widget-panel::part(arrowcontent) {
  --arrowpanel-padding: 4px 0;
}

#appMenu-popup panelview,
#customizationui-widget-multiview panelview:not([extension]) {
  min-width: @menuPanelWidth@;
  max-width: 35em;
}

#customizationui-widget-multiview #appMenu-libraryView,
#pageActionPanel panelview,
#widget-overflow panelview {
  min-width: @wideMenuPanelWidth@;
  max-width: @wideMenuPanelWidth@;
}

/* Add 2 * 16px extra width for touch mode button padding. */
#appMenu-popup[touchmode] panelview {
  min-width: calc(@menuPanelWidth@ + 32px);
}

.cui-widget-panel.cui-widget-panelWithFooter::part(arrowcontent) {
  padding-bottom: 0;
}

.toolbaritem-combined-buttons@inAnyPanel@ > 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="menu-panel"] > .toolbarbutton-1 {
  -moz-box-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="menu-panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  height: @panelPaletteIconSize@;
  width: @panelPaletteIconSize@;
}

#customization-palette .toolbarbutton-1 {
  appearance: none;
  -moz-box-orient: vertical;
  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: @panelPaletteIconSize@;
  height: @panelPaletteIconSize@;
  min-width: @panelPaletteIconSize@;
  min-height: @panelPaletteIconSize@;
  margin: 0;
  padding: 0;
}

#zoom-in-button > .toolbarbutton-text,
#zoom-out-button > .toolbarbutton-text,
#zoom-reset-button > .toolbarbutton-icon {
  display: none;
}

.addon-banner-item::after,
.panel-banner-item::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-inline: 10px 12px;
  display: -moz-box;
}

.addon-banner-item {
  background-color: @appmenuWarningBackgroundColor@;
  color: @appmenuWarningColor@;
  /* Force border to override `.addon-banner-item` selector below */
  border-top: 1px solid @appmenuWarningBorderColor@ !important;
  display: flex;
  flex: 1 1 0%;
  width: calc(@menuPanelWidth@ + 30px);
  padding-inline-start: 15px;
  border-inline-start-style: none;
  -moz-image-region: rect(0, 16px, 16px, 0);
}

.addon-banner-item:last-child {
  border-bottom: 1px solid @appmenuWarningBorderColor@;
}

.addon-banner-item:focus,
.addon-banner-item:hover {
  background-color: @appmenuWarningBackgroundColorHover@;
}

.addon-banner-item:hover:active {
  background-color: @appmenuWarningBackgroundColorActive@;
}

.panel-banner-item > .toolbarbutton-icon,
.addon-banner-item > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

.addon-banner-item::after {
  background: url(chrome://browser/skin/warning.svg) no-repeat center;
}

:root[lwt-popup-brighttext] .addon-banner-item::after {
  -moz-context-properties: fill, stroke;
  fill: #FFE900;
  stroke: transparent;
}

.addon-banner-item,
.panel-banner-item {
  margin: 0;
  padding: 11px 0;
  box-sizing: border-box;
  min-height: 40px;
  appearance: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  transition: background-color;
  -moz-box-orient: horizontal;
}

@supports -moz-bool-pref("browser.proton.enabled") {
.addon-banner-item,
.panel-banner-item {
  margin: 0 8px 4px;
  padding: 8px;
  min-height: unset;
  border-radius: 4px;
  -moz-box-align: start;
}

} /** END Proton **/

@supports not -moz-bool-pref("browser.proton.enabled") {
.panel-banner-item {
  border-block: 1px solid var(--panel-separator-color);
  padding-inline-start: 12px;
}

#appMenu-addon-banners:not(:empty) + .panel-banner-item {
  /* Overlap the .addon-banner-item border so there's one border. */
  margin-top: -1px;
}

#appMenu-addon-banners > .addon-banner-item {
  padding-inline-start: 12px;
}

.panel-banner-item > .toolbarbutton-text {
  width: 0; /* Fancy cropping solution for flexbox. */
}

#appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status,
.panel-banner-item:not([hidden]) + #appMenu-fxa-status {
  margin-top: 6px;
}
} /** END not Proton **/

/* FxAccount indicator bits. */

#appMenu-fxa-label {
  -moz-context-properties: fill;
  fill: currentColor;
  list-style-image: var(--avatar-image-url);
}

#appMenu-fxa-label {
  -moz-box-flex: 1;
}

@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");
}

#appMenu-fxa-status {
  -moz-box-align: center;
}

:root[fxadisabled=true] #appMenu-fxa-status {
  display: none;
}

#appMenu-fxa-avatar,
#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. */
#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label > .toolbarbutton-icon,
#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar,
:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
  display: none;
}

#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
  /* 12px space before the avatar, then 16px for the avatar */
  padding-inline-start: 28px;
  margin-inline-start: -28px;
}

#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
  margin-inline-start: 12px;
}

/* Error states */
#appMenu-fxa-status[fxastatus="unverified"] > #appMenu-fxa-label,
#appMenu-fxa-status[fxastatus="login-failed"] > #appMenu-fxa-label {
  list-style-image: url(chrome://browser/skin/warning.svg);
  -moz-image-region: rect(0, 16px, 16px, 0);
}

#appMenu-fxa-status[fxastatus="login-failed"],
#appMenu-fxa-status[fxastatus="unverified"],
:root[fxastatus="login-failed"] .fxa-menu-header,
:root[fxastatus="unverified"] .fxa-menu-header {
  background-color: @appmenuWarningBackgroundColor@;
  color: @appmenuWarningColor@;
  border-block: 1px solid @appmenuWarningBorderColor@;
}

#appMenu-fxa-status[fxastatus="login-failed"]:hover,
#appMenu-fxa-status[fxastatus="unverified"]:hover,
:root[fxastatus="login-failed"] .fxa-menu-header:hover,
:root[fxastatus="unverified"] .fxa-menu-header:hover {
  background-color: @appmenuWarningBackgroundColorHover@;
}

#appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
#appMenu-fxa-status[fxastatus="unverified"]:hover:active,
:root[fxastatus="login-failed"] .fxa-menu-header:hover:active,
:root[fxastatus="unverified"] .fxa-menu-header:hover:active {
  background-color: @appmenuWarningBackgroundColorActive@;
}

@supports -moz-bool-pref("browser.proton.enabled") {
  #appMenu-fxa-status2[fxastatus] {
    margin: 0;
    padding: 0;
  }

  #appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2,
  #appMenu-fxa-text {
    font-weight: 600;
  }

  #appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 {
    padding-block: 16px;
    -moz-box-flex: 1;
  }

  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
    padding: 6px 12px;
    background-color: var(--buttons-secondary-bgcolor);
    font-size: 11px;
    font-weight: 600;
  }

  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover {
    background-color: var(--buttons-secondary-hover-bgcolor);
  }

  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active {
    background-color: var(--buttons-secondary-active-bgcolor);
  }

  :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 {
    margin-inline-start: 0;
  }

  .syncNowBtn {
    visibility: collapse;
    -moz-box-ordinal-group: 2;
  }

  .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
    font-size: 11px;
  }
} /** END Proton **/

/* Tracking Protection Button & Toggle */

#appMenu-protection-report-text {
  -moz-context-properties: fill;
  fill: currentColor;
  -moz-box-flex: 1;
  padding: 0;
  padding-inline-start: 8px;
  margin: 0;
}

#appMenu-protection-report-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/dashboard.svg);
}

#appMenu-protection-report-button {
  -moz-box-flex: 1;
}

.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text {
  text-align: start;
}

@supports not -moz-bool-pref("browser.proton.enabled") {
.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text {
  margin: 0;
  padding: 0 6px;
}
} /** END not Proton **/

@supports -moz-bool-pref("browser.proton.enabled") {
.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text {
  margin-inline-start: 8px;
  padding: 0;
}
} /** END Proton **/

.addon-banner-item > .toolbarbutton-icon,
.panel-banner-item > .toolbarbutton-icon {
  margin-inline-end: 0;
}

.addon-banner-item {
  flex: 1;
  padding-inline-start: 15px;
  border-inline-start-style: none;
}

:root[lwt-popup-brighttext] .addon-banner-item {
  color: @appmenuWarningColorBrightText@;
  background: @appmenuWarningBackgroundColorBrightText@;
  /* override `.addon-banner-item` border-top !important defined above */
  border: 0 !important;
}

:root[lwt-popup-brighttext] .addon-banner-item:hover,
:root[lwt-popup-brighttext] .addon-banner-item:focus {
  background: @appmenuWarningBackgroundColorHoverBrightText@;
}

:root[lwt-popup-brighttext] .addon-banner-item:hover:active,
:root[lwt-popup-brighttext] .addon-banner-item:focus:active {
  background: @appmenuWarningBackgroundColorActiveBrightText@;
}

:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"],
:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"],
:root[lwt-popup-brighttext][fxastatus="login-failed"] .fxa-menu-header,
:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header {
  background-color: @appmenuWarningBackgroundColorBrightText@;
  color: @appmenuWarningColorBrightText@;
}

:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover,
:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover,
:root[lwt-popup-brighttext][fxastatus="login-failed"] .fxa-menu-header:hover,
:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header:hover {
  background-color: @appmenuWarningBackgroundColorHoverBrightText@;
}

:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover:active,
:root[lwt-popup-brighttext][fxastatus="login-failed"] .fxa-menu-header:hover:active,
:root[lwt-popup-brighttext][fxastatus="unverified"] .fxa-menu-header:hover:active {
  background-color: @appmenuWarningBackgroundColorActiveBrightText@;
}

/* Firefox Account Toolbar Panel */

#fxa-avatar-image {
  width: 16px;
  height: 16px;
}

:root {
  --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
}

:root[fxastatus="unverified"] {
  --avatar-image-url: url(chrome://browser/skin/fxa/avatar-confirm.svg);
}

:root[fxastatus="login-failed"] {
  --avatar-image-url: url(chrome://browser/skin/fxa/avatar-alert.svg);
}

:root[fxastatus="not_configured"] {
  --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
}

:root:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
  display: none;
}

/* Hide the FxA toolbar button when its in the nav-bar, until in use */
@supports -moz-bool-pref("browser.proton.enabled") {
  :root[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button {
    display: none;
  }
}

#fxa-menu-avatar,
#fxa-avatar-image,
#PanelUI-fxa-menu-account-settings-button {
  list-style-image: var(--avatar-image-url);
}

/* Non-signedin statuses icons are not totally round. */
:root[fxastatus="signedin"] #fxa-menu-avatar,
:root[fxastatus="signedin"] #fxa-avatar-image {
  border-radius: 50%;
}

.PanelUI-fxa-service-description-label,
.PanelUI-remotetabs-instruction-label {
  /* Use 'lighter' font for this to de-emphasize it compared to the title.
   * We use 300 on Linux because 100 is too light (lacks contrast with
   * the background) for some fonts in combination with anti-aliasing. */
%if defined(XP_MACOSX) || defined(XP_WIN)
  font-weight: lighter;
%else
  font-weight: 300;
%endif
}

.fxa-menu-header {
  padding-block: 8px 4px;
}

#fxa-menu-header-title {
  color: var(--arrowpanel-color);
}

#fxa-menu-header-description {
  color: var(--panel-description-color);
  font-weight: 600;
}

#PanelUI-appMenu-fxa-label-last-synced {
  font-size: 10px;
  font-style: italic;
  color: var(--panel-description-color);
}

#fxa-menu-avatar {
  height: 32px;
  width: 32px;
  -moz-context-properties: fill, fill-opacity;
  fill: var(--arrowpanel-color);
}

#PanelUI-fxa-menu-send-button {
  list-style-image: url(chrome://browser/skin/fxa/send.svg);
}

#PanelUI-fxa-menu-monitor-button {
  list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
}

#PanelUI-fxa-menu-connect-device-button {
  list-style-image: url(chrome://browser/skin/fxa/add-device.svg);
}

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

@supports not -moz-bool-pref("browser.proton.enabled") {
  #PanelUI-fxa-menu-account-signout-button {
    list-style-image: url(chrome://browser/skin/sign-out.svg);
  }

  #PanelUI-fxa-menu-sendtab-button {
    list-style-image: url("chrome://browser/skin/send-to-device.svg");
  }
} /** END not Proton **/

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

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

.PanelUI-fxa-service-description-label,
.PanelUI-remotetabs-instruction-label {
  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;
  padding: 8px;
  text-shadow: none;
  min-width: 200px;
}

.PanelUI-fxa-signin-button,
.PanelUI-remotetabs-button {
  padding: 1em;
}

.PanelUI-fxa-signin-button:hover,
.PanelUI-remotetabs-button:hover {
  background-color: #003eaa;
}

.PanelUI-fxa-signin-button:hover:active,
.PanelUI-remotetabs-button:hover:active {
  background-color: #002275;
}

.remotetabs-promo-link {
  margin: 0;
}

.PanelUI-remotetabs-notabsforclient-label {
  color: var(--panel-description-color);
  /* This margin is to line this label up with the labels in toolbarbuttons. */
  margin-inline-start: 28px;
}

#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
  margin-inline-start: 32px;
}

.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 {
  /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
  text-align: center !important;
  text-shadow: none;
}

#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
  min-width: 19em;
}

/* Work around bug 1224412 - these boxes will cause scrollbars to appear when
   the panel is anchored to a toolbar button.
*/
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-syncdisabled,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
#PanelUI-remotetabs[mainview] #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(--panel-description-color);
}

/* 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,
#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
#PanelUI-remotetabs-deck: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;
}

.panel-banner-item {
  color: var(--panel-banner-item-color) !important /* !important overrides the toolbarbutton:hover default style on Linux */;
  background-color: var(--panel-banner-item-background-color);
}

.panel-banner-item:not([disabled]):focus,
.panel-banner-item:not([disabled]):hover {
  background-color: var(--panel-banner-item-hover-bgcolor);
}

.panel-banner-item:not([disabled]):hover:active {
  background-color: var(--panel-banner-item-active-bgcolor);
}

.panel-banner-item[notificationid="update-unsupported"] {
  background-color: @appmenuWarningBackgroundColor@;
}

.panel-banner-item[notificationid="update-unsupported"]:not([disabled]):focus,
.panel-banner-item[notificationid="update-unsupported"]:not([disabled]):hover {
  background-color: @appmenuWarningBackgroundColorHover@;
}

.panel-banner-item[notificationid="update-unsupported"]:not([disabled]):hover:active {
  background-color: @appmenuWarningBackgroundColorActive@;
}

:root[lwt-popup-brighttext] .panel-banner-item[notificationid="update-unsupported"]:not([disabled]) {
  background-color: @appmenuWarningBackgroundColorBrightText@;
}

:root[lwt-popup-brighttext] .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):focus,
:root[lwt-popup-brighttext] .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):hover {
  background-color: @appmenuWarningBackgroundColorHoverBrightText@;
}

:root[lwt-popup-brighttext] .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):active {
  background-color: @appmenuWarningBackgroundColorActiveBrightText@;
}

#customization-palette .toolbarbutton-text {
  display: none;
}

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

.subviewbutton:focus {
  outline: 0;
}

.subviewbutton[disabled="true"] {
  color: var(--panel-disabled-color);
}

.subviewbutton > .menu-right {
  appearance: none;
  list-style-image: url(chrome://global/skin/icons/menu-arrow.svg);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  width: unset;
  height: unset;
  /* Reset the rect we inherit from the button */
  -moz-image-region: auto;
}

.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

@supports not -moz-bool-pref("browser.proton.enabled") {
.subviewbutton > .toolbarbutton-text {
  padding: 0;
  padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */
}

.subviewbutton > .menu-right {
  list-style-image: url(chrome://browser/skin/customizableui/menu-arrow.svg);
}
} /** END not Proton **/

.subviewbutton > .menu-right,
.subviewbutton > .menu-accel-container > .menu-iconic-accel,
.subviewbutton > .menu-iconic-left,
.subviewbutton > .menu-iconic-text {
  padding-block: 0;
}

.addon-banner-item > .toolbarbutton-text,
.subviewbutton-iconic > .toolbarbutton-text,
.subviewbutton[image] > .toolbarbutton-text,
.subviewbutton[targetURI] > .toolbarbutton-text,
.subviewbutton.restoreallitem > .toolbarbutton-text,
.subviewbutton.bookmark-item > .toolbarbutton-text,
.subviewbutton[checked="true"] > .toolbarbutton-text {
  padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
}

.subviewbutton-iconic > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
  -moz-context-properties: fill;
  fill: currentColor;
}

@supports -moz-bool-pref("browser.proton.enabled") {
#appMenu-zoomReduce-button2@buttonStateHoverOrFocus@,
#appMenu-zoomReduce-button2@buttonStateActive@,
#appMenu-zoomEnlarge-button2@buttonStateHoverOrFocus@,
#appMenu-zoomEnlarge-button2@buttonStateActive@,
#appMenu-fullscreen-button2@buttonStateHoverOrFocus@,
#appMenu-fullscreen-button2@buttonStateActive@ {
  color: unset;
  background-color: unset;
  box-shadow: unset;
}

#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
  -moz-context-properties: fill;
  fill: var(--buttons-secondary-color);
}

#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
  border-radius: 500px;
}

#appMenu-fullscreen-button2 > .toolbarbutton-icon {
  border-radius: 2px;
}

#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
  background-color: var(--buttons-secondary-bgcolor);
}

#appMenu-zoomReduce-button2@buttonStateHover@ > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2@buttonStateHover@ > .toolbarbutton-icon,
#appMenu-fullscreen-button2@buttonStateHover@ > .toolbarbutton-icon {
  background-color: var(--buttons-secondary-hover-bgcolor);
}

#appMenu-zoomReduce-button2@buttonStateActive@ > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2@buttonStateActive@ > .toolbarbutton-icon,
#appMenu-fullscreen-button2@buttonStateActive@ > .toolbarbutton-icon {
  background-color: var(--buttons-secondary-active-bgcolor);
}

#appMenu-zoomReduce-button2@buttonStateFocus@ > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2@buttonStateFocus@ > .toolbarbutton-icon,
#appMenu-fullscreen-button2@buttonStateFocus@ > .toolbarbutton-icon {
  box-shadow: var(--panelview-toolbarbutton-focus-box-shadow);
}

#appMenu-zoom-controls2 > .subviewbutton {
  margin-inline-start: 2px;
  padding: 4px 4px;
}
} /*** END proton ***/

/* 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:
 */
.subviewbutton > .toolbarbutton-icon {
  margin: 0;
}

.panel-subview-footer-button {
  margin-bottom: 6px;
}

.subviewbutton.panel-subview-footer > .menu-text {
  appearance: none;
  padding-inline-start: 0 !important; /* to override menu.css on Windows */
  padding-inline-end: 6px;
  -moz-box-flex: 0;
}

.subviewbutton.panel-subview-footer > .toolbarbutton-text {
  padding-inline-start: 0;
}

.subviewbutton.panel-subview-footer > .menu-accel-container {
  padding-inline-start: 6px;
}

.subviewbutton > .menu-accel-container > .menu-iconic-accel,
.subviewbutton > .menu-accel-container > .menu-accel {
  margin-inline-end: 0 !important; /* to override menu.css on Windows */
}

.subviewbutton[shortcut]::after {
  content: attr(shortcut);
  display: -moz-box;
  color: var(--panel-shortcut-color);
}

.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
  -moz-context-properties: fill, fill-opacity;
  content: url(chrome://global/skin/icons/menu-arrow.svg);
  fill: currentColor;
  fill-opacity: 0.6;
  display: -moz-box;
}

.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after,
.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
  scale: -1 1;
}

@supports not -moz-bool-pref("browser.proton.enabled") {
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
  content: url(chrome://browser/skin/customizableui/menu-arrow.svg);
  translate: 0 1px;
}
} /* END not Proton */

.PanelUI-subView .subviewbutton-nav-down::after {
  rotate: 90deg;
}

.subviewbutton[shortcut]::after,
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
  margin-inline-start: 10px;
}

.subviewbutton[checked="true"] {
  list-style-image: url(chrome://global/skin/icons/check.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  color: inherit;
}

.subviewbutton[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: -moz-box;
  height: 12px;
  width: 12px;
}

.subviewbutton[type="open-to-new"]:-moz-locale-dir(rtl)::after {
  transform: scaleX(-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;
}

.toolbaritem-menu-buttons > .subviewbutton {
  min-width: auto;
  padding-inline: 5px;
}

.toolbaritem-menu-buttons > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text {
  display: none;
}

.toolbaritem-combined-buttons,
.toolbaritem-menu-buttons {
  -moz-box-align: center;
  -moz-box-orient: horizontal;
  border: 0;
  border-radius: 0;
}

.toolbaritem-combined-buttons:not([widget-type="button-and-view"]),
.toolbaritem-menu-buttons {
  margin-inline-end: 8px;
}

panelmultiview .toolbaritem-combined-buttons > label {
  -moz-box-flex: 1;
  margin: 0;
  padding: 4px 0;
}

panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
  width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
}

panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
  -moz-box-flex: 1;
  width: 20px; /* a little bigger than the width of the scrollbar */
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
  -moz-box-flex: 0;
  height: auto;
  margin-inline-start: 18px;
  min-width: auto;
  padding: 4px 5px;
}

#appMenu-zoom-controls > .subviewbutton {
  margin-inline-start: 10px;
}

/* Unset the min-height constraint, because that works better for a text-only button. */
#appMenu-zoomReset-button {
  min-height: unset;
  border: 1px solid var(--panel-separator-color);
  border-radius: 10000px;
  padding: 1px 8px;
  background-color: var(--arrowpanel-dimmed);
}

#appMenu-zoomReset-button@buttonStateHoverOrFocus@,
#appMenu-zoomReset-button2@buttonStateHoverOrFocus@ {
  background-color: var(--arrowpanel-dimmed-further);
}

#appMenu-zoomReset-button@buttonStateActive@,
#appMenu-zoomReset-button2@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-even-further);
}

#appMenu-zoomReset-button > .toolbarbutton-text,
#appMenu-zoomReset-button2 > .toolbarbutton-text {
  min-width: calc(4ch + 8px);
  text-align: center;
}

#appMenu-zoom-controls > toolbarseparator[orient="vertical"] + .subviewbutton,
#appMenu-zoom-controls2 > toolbarseparator[orient="vertical"] + .subviewbutton {
  margin-inline-start: 0;
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
  display: none;
}

.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
  padding-inline-start: 0;
}

.subview-subheader {
  font-size: inherit;
  font-weight: inherit;
  color: var(--panel-description-color);
}

panelview .toolbarbutton-1 {
  margin-top: 6px;
}

@supports not -moz-bool-pref("browser.proton.enabled") {
  panelview .toolbarbutton-1@buttonStateHoverOrFocus@,
  toolbarbutton.subviewbutton@buttonStateHoverOrFocus@,
  .navigable.subviewbutton@buttonStateHoverOrFocus@,
  menu.subviewbutton@menuStateHover@,
  menuitem.subviewbutton@menuStateHover@,
  .widget-overflow-list .toolbarbutton-1@buttonStateHoverOrFocus@,
  .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHoverOrFocus@ {
    color: var(--panelview-toolbarbutton-hover-color);
    background-color: var(--panelview-toolbarbutton-hover-bgcolor);
  }
} /** END not Proton **/

@supports -moz-bool-pref("browser.proton.enabled") {
  /**
   * Focus in Proton uses a box-shadow because we want the stroke to be
   * internal to the rect without affecting the surrounding layout. This
   * seemed to be the simplest way to do that.
   */
  panelview .toolbarbutton-1@buttonStateFocus@,
  toolbarbutton.subviewbutton@buttonStateFocus@,
  .navigable.subviewbutton@buttonStateFocus@,
  .widget-overflow-list .toolbarbutton-1@buttonStateFocus@,
  .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateFocus@ {
    box-shadow: var(--panelview-toolbarbutton-focus-box-shadow);
  }

  panelview .toolbarbutton-1@buttonStateHover@,
  toolbarbutton.subviewbutton@buttonStateHover@,
  .navigable.subviewbutton@buttonStateHover@,
  menu.subviewbutton@menuStateHover@,
  menuitem.subviewbutton@menuStateHover@,
  .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
  .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
    color: var(--panelview-toolbarbutton-hover-color);
    background-color: var(--panelview-toolbarbutton-hover-bgcolor);
  }

  .subview-subheader {
    font-size: 11px;
    padding-block: 4px;
  }
} /** END Proton **/

panelview .toolbarbutton-1@buttonStateActive@,
toolbarbutton.subviewbutton@buttonStateActive@,
.navigable.subviewbutton@buttonStateActive@,
menu.subviewbutton@menuStateActive@,
menuitem.subviewbutton@menuStateActive@,
.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
  color: var(--panelview-toolbarbutton-active-color);
  background-color: var(--panelview-toolbarbutton-active-bgcolor);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}

.subviewbutton.panel-subview-footer {
  margin: 0;
  background-color: var(--arrowpanel-dimmed);
  border-top: 1px solid var(--panel-separator-color);
  border-radius: 0;
}

menuitem.panel-subview-footer@menuStateHover@,
.subviewbutton.panel-subview-footer@buttonStateHoverOrFocus@ {
  background-color: var(--arrowpanel-dimmed-further);
}

menuitem.panel-subview-footer@menuStateActive@,
.subviewbutton.panel-subview-footer@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-even-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
  color: inherit;
}

#BMB_bookmarksPopup .subviewbutton > .menu-iconic-left {
  margin-inline-end: 3px;
}

#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
  /* Hide bottom separator as the styled footer includes a top border serving the same purpose */
  display: none;
}

/* Disabled (empty) item is always alone and never has an icon, so fix its left padding */
#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
  padding-left: 6px;
}

#widget-overflow-mainView > toolbarseparator,
#widget-overflow-mainView > .panel-subview-body > toolbarseparator,
.PanelUI-subView toolbarseparator,
.cui-widget-panelview menuseparator,
.cui-widget-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;
}

@supports -moz-bool-pref("browser.proton.enabled") {
.PanelUI-subView toolbarseparator.proton-zap {
  border-image: var(--panel-separator-zap-gradient) 1;
}
}

.PanelUI-subView toolbarseparator.small-separator {
  margin-inline: 5px;
}

.cui-widget-panelview menuseparator.small-separator {
  margin-inline: 10px;
}

.PanelUI-subView toolbarseparator[orient="vertical"] {
  height: 24px;
  border-inline-start: 1px solid var(--panel-separator-color);
  border-top: none;
  margin: 0;
  margin-inline: 6px 7px;
}

.subviewbutton > .menu-accel-container {
  -moz-box-pack: end;
  margin-inline: 10px auto;
}

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

#appMenu-fxa-avatar,
#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;
}

#appMenu-fxa-avatar,
#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon {
  border-radius: 50%;
}

#search-container[cui-areatype="menu-panel"] {
  padding-block: 6px;
}

toolbarpaletteitem[place="palette"] > #search-container {
  min-width: 7em;
  width: 7em;
  min-height: 37px;
  max-height: 37px;
}

.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
  border: 0;
  margin: 0;
  -moz-box-flex: 1;
  padding-block: 4px;
  -moz-box-orient: horizontal;
}

toolbarpaletteitem[place="menu-panel"],
toolbarpaletteitem[place="menu-panel"] > toolbaritem {
  -moz-box-flex: 1;
}

.toolbaritem-combined-buttons[cui-areatype="menu-panel"] > .toolbarbutton-combined-buttons-dropmarker {
  display: none;
}

.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton:not(.toolbarbutton-1)[disabled] {
  opacity: 0.4;
  /* Override toolbarbutton.css which sets the color to GrayText */
  color: inherit;
}

#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
  /* 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);
}

.toolbaritem-combined-buttons@inAnyPanel@ > separator {
  appearance: none;
  -moz-box-align: stretch;
  margin: .5em 0;
  width: 1px;
  height: auto;
  background: var(--panel-separator-color);
  transition-property: margin;
  transition-duration: 10ms;
  transition-timing-function: ease;
}

.toolbaritem-combined-buttons@inAnyPanel@:hover > separator {
  margin: 0;
}

#widget-overflow-mainView .panel-subview-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.widget-overflow-list {
  width: @wideMenuPanelWidth@;
}

/* In customize mode, the overflow list is constrained by its container,
 * so we set width: auto to avoid the scrollbar not fitting.
 */
#customization-panelHolder > .widget-overflow-list {
  width: auto;
}

toolbaritem[overflowedItem=true],
.widget-overflow-list .toolbarbutton-1 {
  width: 100%;
  max-width: @wideMenuPanelWidth@;
  background-repeat: no-repeat;
  background-position: 0 center;
}

.widget-overflow-list .toolbarbutton-1 {
  -moz-box-align: center;
  -moz-box-orient: horizontal;
}

toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
  opacity: 0.5;
}

.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
  text-align: start;
  padding-inline-start: .5em;
}

.subviewbutton > .menu-iconic-left {
  appearance: none;
  margin-inline-end: 0;
}

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

#panic-button-success-icon,
#PanelUI-panic-timeframe-icon {
  list-style-image: url(chrome://browser/skin/panic-panel/header.png);
  max-height: 48px;
  width: 48px;
}

#panic-button-success-header {
  -moz-box-align: center;
  margin-bottom: 5px;
}

#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.subviewradio {
  appearance: none;
  -moz-box-align: center;
  padding: 3px;
  margin: 0 0 2px;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid transparent;
}

.subviewradio@buttonStateHoverOrFocus@ {
  background-color: var(--buttons-secondary-hover-bgcolor);
}

.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio@buttonStateActive@ {
  background-color: var(--buttons-secondary-active-bgcolor);
}

@supports not -moz-bool-pref("browser.proton.enabled") {
.subviewradio {
  padding: 1px;
  border-radius: 2px;
}

.subviewradio@buttonStateHoverOrFocus@,
.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio@buttonStateActive@ {
  border-color: var(--panel-separator-color);
}

.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio@buttonStateActive@ {
  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}
} /*** END !proton ***/

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

.subviewradio > .radio-check[selected] {
  background-color: #fff;
  border: 4px solid #177ee6;
}

:root[lwt-popup-brighttext] .subviewradio > .radio-check[selected] {
  background-color: transparent;
  border: 4px solid #00ddff;
}

#PanelUI-panic-explanations {
  padding: 10px 10px 0;
}

#PanelUI-panic-actionlist-main-label {
  color: var(--panel-description-color);
  font-size: 0.9em;
}

.PanelUI-panic-actionlist {
  padding-block: 2px;
  padding-inline-start: 20px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: left center;
}

.PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
  background-position-x: right;
}

#PanelUI-panic-actionlist-cookies {
  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
}

#PanelUI-panic-actionlist-history {
  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
}

#PanelUI-panic-actionlist-windows {
  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
}

#PanelUI-panic-actionlist-newwindow {
  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
}

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

#PanelUI-panic-view-button:hover {
  background-color: var(--buttons-destructive-hover-bgcolor);
}

#PanelUI-panic-view-button:hover:active {
  background-color: var(--buttons-destructive-active-bgcolor);
}

#PanelUI-panic-view-button > .toolbarbutton-text {
  text-align: center;
  text-shadow: none;
}

#panic-button-success-closebutton {
  background-color: var(--buttons-secondary-bgcolor);
  color: var(--buttons-secondary-color);
  margin: 5px 0 0;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px;
  font-weight: 600;
  appearance: none;
}

#panic-button-success-closebutton:hover {
  background-color: var(--buttons-secondary-hover-bgcolor);
}

#panic-button-success-closebutton:hover:active {
  background-color: var(--buttons-secondary-active-bgcolor);
}

@supports not -moz-bool-pref("browser.proton.enabled") {
#panic-button-success-closebutton,
#PanelUI-panic-view-button {
  font-weight: normal;
}
} /*** END !proton ***/

@media (min-resolution: 1.1dppx) {
  @supports not -moz-bool-pref("browser.proton.enabled") {
    .panel-banner-item[notificationid^=update] {
      list-style-image: url(chrome://branding/content/icon32.png);
    }
  } /** END not Proton **/

  #panic-button-success-icon,
  #PanelUI-panic-timeframe-icon {
    list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png);
  }

  #PanelUI-panic-actionlist-cookies {
    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0);
  }

  #PanelUI-panic-actionlist-history {
    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32);
  }

  #PanelUI-panic-actionlist-windows {
    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64);
  }

  #PanelUI-panic-actionlist-newwindow {
    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96);
  }
}

.panel-header {
  align-items: center;
  display: flex;
  flex: 1 auto;
  padding: 4px;
}

@supports -moz-bool-pref("browser.proton.enabled") {
  .panel-header {
    padding-top: 8px;
  }
} /** END Proton **/

@supports not -moz-bool-pref("browser.proton.enabled") {
  .panel-header {
    border-bottom: 1px solid var(--panel-separator-color);
  }
} /** END not Proton **/

.panel-header > h1 {
  display: inline;
  flex: auto;
  font-size: inherit;
  font-weight: 600;
  margin: 4px 0;
  text-align: center;
}

.panel-header > h1 > span {
  display: inline-block;
  white-space: pre-wrap;
}

.panel-header > .subviewbutton-back + h1 {
  /* Add the size of the back button to center properly. */
  margin-inline-end: 32px;
}

.panel-header > .subviewbutton-back {
  -moz-context-properties: fill;
  fill: var(--arrowpanel-color);
  list-style-image: url(chrome://global/skin/icons/menu-arrow-left.svg);
  padding: 10px;
}

@supports -moz-bool-pref("browser.proton.enabled") {
.subviewbutton-back {
  transform: translateY(1px);
  margin: 0 4px;
}

.subviewbutton-back:-moz-locale-dir(rtl) {
  transform: scaleX(-1) translateY(1px);
}

.panel-header > .subviewbutton-back > .toolbarbutton-icon {
  width: 12px;
  height: 12px;
}
} /** End Proton **/

@supports not -moz-bool-pref("browser.proton.enabled") {
  .panel-header > .subviewbutton-back {
    list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
    padding: 8px;
  }

  .subviewbutton-back:-moz-locale-dir(rtl) {
    transform: scaleX(-1);
  }
} /** END not Proton **/

.subviewbutton-back > .toolbarbutton-text {
  /* !important to override .cui-widget-panel .toolbarbutton-text
   * selector further down. */
  display: none !important;
}

/* What's New panel */
#customizationui-widget-multiview #PanelUI-whatsNew {
  max-width: @menuPanelWidth@;
}

#protections-popup-main-header-label {
  margin-inline-start: 30px;
  text-align: center;
}

#protections-popup #messaging-system-message-container {
  height: 260px;
  overflow: hidden;
  transition: margin-bottom .25s;
  border-top: 1px solid var(--panel-separator-color);
}

#protections-popup #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;
}

#protections-popup #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;
  color: white;
}

#protections-popup-message:-moz-locale-dir(rtl) {
  background-position: top left;
}

#protections-popup-message > .whatsNew-message-body > .text-link {
  text-decoration: underline;
}

#protections-popup-message .protections-popup-content {
  display: block;
  margin: 12px 0;
}

panelview[mainview] #PanelUI-whatsNew-content {
  height: 43em;
}

/* Hide the What's New header when the panel is a subview */
panelview:not([mainview]) #PanelUI-whatsNew-title {
  display: none;
}

#PanelUI-whatsNew .panel-subview-body {
  padding-top: 0;
}

#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox {
  border-top: 1px solid var(--panel-separator-color);
  padding-inline-start: 16px;
  min-height: 41px;
}

@supports not -moz-bool-pref("browser.proton.enabled") {
#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox {
  background-color: var(--arrowpanel-dimmed);
  padding-inline-start: 18px;
}

#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox:hover {
  background-color: var(--arrowpanel-dimmed-further);
}

#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox:focus {
  background-color: var(--arrowpanel-dimmed-further);
  outline: 2px solid rgba(0, 96, 223, 0.5);
  outline-offset: -2px;
}

#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox:active {
  background-color: var(--arrowpanel-dimmed-even-further);
}

/* These checkbox styles have been pulled from `common.inc.css` and
   duplicated here to ensure they apply correctly. See
   https://searchfox.org/mozilla-central/rev/7908ce29657cfd623993046bd8e38664e1c0b28e/toolkit/themes/shared/in-content/common.inc.css#559 */
#PanelUI-whatsNew checkbox {
  appearance: none;
  height: 30px;
  margin: 0;
}

#PanelUI-whatsNew checkbox[checked] {
  list-style-image: url("chrome://global/skin/icons/check.svg");
  -moz-context-properties: fill;
  fill: #2292d0;
}

#PanelUI-whatsNew .checkbox-check {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 1px;
  border: 1px solid #A9A9A9;
  border-radius: 2px;
  margin: 0;
  margin-inline-end: 6px;
  background-color: #FFF;
  background-position: center;
  background-repeat: no-repeat;
}

#PanelUI-whatsNew checkbox:hover .checkbox-check {
  border-color: #0a84ff;
}

#PanelUI-whatsNew .checkbox-icon {
  display: none;
}
} /*** END !proton ***/

#PanelUI-whatsNew .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
 */
#PanelUI-whatsNew .whatsNew-message-body::before {
  content: "";
  display: block;
  height: 1px;
  width: 104%;
  margin-inline-start: -2%;
  background: var(--panel-separator-color);
}

#PanelUI-whatsNew .has-icon::before {
  /* the width of the icon + the grid margin */
  width: calc(104% + 40px);
}

#PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before {
  display: none;
}

#PanelUI-whatsNew .whatsNew-message-date {
  font-size: .85em;
  margin: -12px;
  margin-top: 0;
  margin-inline-start: 0;
  padding: 6px 16px;
  background: var(--arrowpanel-dimmed);
}

#PanelUI-whatsNew .whatsNew-message-body {
  padding: 5px 0 10px;
  margin: 10px 16px;
  text-align: inherit;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

#protections-popup-message .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);
}

#PanelUI-whatsNew .whatsNew-message-body.has-icon {
  display: grid;
  grid-template-columns: auto 32px;
  grid-template-rows: 0;
  grid-gap: 0 8px;
}

#PanelUI-whatsNew .whatsNew-message-icon {
  height: 32px;
  width: 32px;
  margin: 14px auto;
  display: grid;
  grid-column-start: 2;
}

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

#PanelUI-whatsNew .whatsNew-message-title-large {
  font-size: 2.1em;
  margin: 2px 0;
  font-weight: 300;
  grid-column-start: 1;
}

#PanelUI-whatsNew .whatsNew-message-subtitle {
  margin: 2px 0;
  font-size: .8em;
  color: #949494;
  font-weight: normal;
  grid-column-start: 1;
}

#PanelUI-whatsNew .whatsNew-message-content {
  display: grid;
  margin: 5px 0 10px;
  grid-column-start: 1;
}

#PanelUI-whatsNew .text-link {
  background: none;
  border: 0;
  color: #45a1ff;
  cursor: pointer;
  font-size: .9em;
  grid-column-start: 1;
}

#protections-popup-message .text-link {
  color: white;
  font-weight: 600;
}

#protections-popup-message .text-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

#PanelUI-whatsNew .text-link:hover {
  color: #0a84ff;
  text-decoration: underline;
}

#PanelUI-whatsNew .text-link:focus {
  color: #0a84ff;
  text-decoration: underline;
}

#PanelUI-whatsNew .text-link:active {
  color: #0060df;
}

#PanelUI-profiler {
  /* On Linux, the popup was too wide for the content due to this rule. This is marked
     as !important to get over the specificity of the CustomizeableUI base rules. */
  min-width: 0 !important;
}

#PanelUI-profiler description {
  max-width: 290px;
}

/* Make the width nicely sized for when the panel is in the overflow menu area. */
#widget-overflow #PanelUI-profiler description {
  max-width: 347px;
}

#widget-overflow #PanelUI-profiler-header-bar {
  display: none;
}

#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 */
  --arrowpanel-dimmed: #0003;
  --arrowpanel-dimmed-further: #0005;
  --arrowpanel-dimmed-even-further: #0007;
}

#PanelUI-profiler-header[isinfocollapsed="false"]:-moz-locale-dir(rtl) {
  background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
}

#PanelUI-profiler-header-bar {
  border-bottom: 1px solid #0003;
}

#PanelUI-profiler-header-bar label {
  margin-inline-start: 32px;
  padding: 12px;
  font-weight: bold;
  text-align: center;
}

#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info {
  pointer-events: none;
}

#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-header-bar {
  border-bottom: 1px solid var(--panel-separator-color);
}

#PanelUI-profiler-info {
  height: 180px;
  background: top 10px right no-repeat
    url("chrome://browser/skin/profiler-popup-backdrop.png");
  opacity: 1;
}

/* 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 animatios
   do not run. */
#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info {
  transition: margin-block-end 250ms, opacity 250ms;
}

#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info {
  opacity: 0;
}

/* Fill the little arrow part of the Profiler panel with the color closest to
   the panel itself, when the info section is expanded */
#customizationui-widget-panel[viewId="PanelUI-profiler"][mainviewshowing][arrowposition="after_end"][isinfoexpanded="true"]::part(arrow) {
  fill: #03b1f4;
}

#customizationui-widget-panel[viewId="PanelUI-profiler"][mainviewshowing][arrowposition="after_start"][isinfoexpanded="true"]::part(arrow) {
  fill: #0556cd;
}

/* Hide the unused box that gets added here. */
#PanelUI-profiler-learn-more > hbox {
  display: none;
}

#PanelUI-profiler-content {
  position: relative;
}

.PanelUI-profiler-toolbarbutton-container {
  -moz-box-pack: center;
  margin-inline-end: 4px;
}

#PanelUI-profiler-info label {
  font-size: 16px;
  font-weight: bold;
  margin: 6px 15px;
}

#PanelUI-profiler-info description {
  margin: 4px 15px;
}

#PanelUI-profiler-info button {
  appearance: none;
  padding: 2px;
  margin: 4px 13px 13px;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

#PanelUI-profiler-info button:active {
  color: #fffc;
}

#PanelUI-profiler-info button:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  text-decoration: none;
}

#PanelUI-profiler-presets {
  appearance: none;
  position: relative; /* Ensure there is a stacking context for the dropdown arrow. */
  width: 100%;
  min-height: 24px;
  background-color: #ededf0;
  color: #0c0c0d;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 400;
  padding-inline: 4px;
  text-decoration: none;
  font-size: 12px;
  margin: 8px 15px;
}

/* This is dark-mode specific styling. */
:root[lwt-popup-brighttext] #PanelUI-profiler-presets {
  background-color: rgb(47, 47, 51);
  color: #fff;
  border: 1px solid #666168;
}

#PanelUI-profiler-presets:hover:not([disabled="true"]) {
  border-color: #DDDDE0;
}

#PanelUI-profiler-presets:focus {
  box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}

#PanelUI-profiler-presets menupopup {
  appearance: none;
  border: 1px solid #B7B7B7;
  border-radius: 2px;
  background-color: #FFF;
  padding-block: 4px;
}

#PanelUI-profiler-presets menuitem {
  appearance: none;
  font-size: 1em;
  color: #000;
  padding-block: 0.2em;
}

#PanelUI-profiler-presets menuitem[_moz-menuactive] {
  color: #fff;
  background-color: #0060DF;
}

#PanelUI-profiler-presets::after {
  width: 12px;
  height: 12px;
  position: absolute;
  display: block;
  content: "";
  margin-block-start: 5px;
  -moz-context-properties: fill;
  fill: currentColor;
  background: url("chrome://global/skin/icons/arrow-dropdown-12.svg") center center no-repeat;
}

#PanelUI-profiler-presets:-moz-locale-dir(ltr)::after {
  right: 22px;
}

#PanelUI-profiler-presets:-moz-locale-dir(rtl)::after {
  left: 22px;
}

#PanelUI-profiler-content-custom-button {
  appearance: none;
  margin: 0;
  color: #0046A4;
  font-size: 12px;
  cursor: pointer;
}

:root[lwt-popup-brighttext] #PanelUI-profiler-content-custom-button {
  color: #76B1FF;
}

#PanelUI-profiler-content-custom-button:hover {
  text-decoration: underline;
}

#PanelUI-profiler-content-custom-button:active,
#PanelUI-profiler-content-custom-button:focus {
  text-decoration: underline;
}

#PanelUI-profiler-content-custom {
  margin-inline: 15px;
}

.PanelUI-profiler-content-label {
  font-weight: bold;
  font-size: 13px;
  margin-inline: 15px;
  margin-block-start: 10px;
}

#PanelUI-profiler-content-description {
  margin: 4px 15px;
  font-size: 12px;
  color: var(--panel-description-color);
}

#PanelUI-profiler-content-recording {
  padding-block: 28px;
  padding-inline: 16px;
  font-size: 16px;
}

.PanelUI-profiler-recording-icon {
  width: 42px;
  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
  -moz-context-properties: fill;
  fill: var(--toolbar-color);
  opacity: 0.3;
}

.PanelUI-profiler-recording-label {
  margin-block: 9px;
  margin-inline: 13px;
}

.PanelUI-profiler-button {
  appearance: none;
  background-color: #e0e0e1;
  border-radius: 2px;
  color: #000;
  padding: 8px;
  margin: 0 5px;
  font-size: 13px;
}

.PanelUI-profiler-button:hover {
  background-color: #c9c9ca;
}

.PanelUI-profiler-button:active {
  background-color: #b1b1b1;
}

.PanelUI-profiler-button:focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

.PanelUI-profiler-button-primary {
  background-color: #0060DF;
  /* The !important designation here is to overcome the specificity of the button.css
     styles that are being applied on linux for hovers. */
  color: #fff !important;
}

.PanelUI-profiler-button-primary:hover {
  background-color: #003eaa;
}

.PanelUI-profiler-button-primary:active {
  background-color: #002275;
}

.PanelUI-profiler-shortcut {
  padding-block-start: 5px;
  opacity: 0.5;
  text-align: center;
}

.PanelUI-profiler-buttons {
  margin: 7px 10px 12px;
}

.PanelUI-profiler-info-icon {
  margin-inline-end: 25px;
  margin-block-start: 20px;
  width: 50px;
  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
  -moz-context-properties: fill;
  fill: #fff;
}

#PanelUI-profiler-presets[disabled="true"]::part(label-box) {
  opacity: 0.5;
}

/**
 * Override the specificity of `#PanelUI-profiler description`
 */
description#PanelUI-profiler-locked {
  padding: 16px;
  line-height: 1.5;
  /* Make sure this description is wider than the header's */
  max-width: 310px;
}
