/* 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
% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
% There's no calc() here (and therefore lots of calc() where this is used) because
% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):-moz-any(:hover,:focus)
%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
%define menuStateActive :not([disabled])[_moz-menuactive]:active
%define menuStateMenuActive :not([disabled])[_moz-menuactive]
%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
%define panelPaletteIconSize 16px

:root {
  --panel-ui-exit-subview-gutter-width: 38px;
  --appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
  --appmenu-yellow-warning-color: #FFEFBF;
  --appmenu-yellow-warning-hover-color: #FFE8A2;
  --appmenu-yellow-warning-active-color: #FFE38F;
}

#PanelUI-popup #PanelUI-contents:empty {
  height: 128px;
}

#PanelUI-popup #PanelUI-contents:empty::before {
  content: "";
  background-image: url(chrome://browser/skin/customizableui/whimsy.png);
  background-size: 64px 64px;
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  transition: transform 1s ease-out;
  animation: whimsyMoveX 3.05s linear 0s infinite alternate,
             whimsyMoveY 3.4s linear 0s infinite alternate;
}

#PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
  filter: grayscale(100%);
}

#PanelUI-popup #PanelUI-contents:active:empty::before {
  animation: whimsyMoveX 3.05s linear 0s infinite alternate,
             whimsyMoveY 3.4s linear 0s infinite alternate,
             whimsyRotate 1s linear 0s infinite normal;
}

#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
  animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
             whimsyMoveY 3.4s linear 0s infinite alternate;
}

#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
  animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
             whimsyMoveY 3.4s linear 0s infinite alternate,
             whimsyRotate 1s linear 0s infinite normal;
}

@media (min-resolution: 2dppx) {
  #PanelUI-popup #PanelUI-contents:empty::before {
    background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png);
  }
}

@keyframes whimsyMoveX {
  /* These values are adjusted for the padding on the panel. */
  from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
}

@keyframes whimsyMoveXRTL {
  /* These values are adjusted for the padding on the panel. */
  from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
}

@keyframes whimsyMoveY {
  /* These values are adjusted for the padding and height of the panel. */
  from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
}

@keyframes whimsyRotate {
  to { transform: perspective(5000px) rotateY(360deg); }
}

:root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
  margin-inline-start: 3px;
  border-inline-start: 1px solid;
  border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
  border-image-slice: 1;
}

:root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #nav-bar[brighttext] > #PanelUI-button {
  border-image-source: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px));
}

#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="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-manual"] > .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;
  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;
}

.panel-banner-item[notificationid^=update]::after {
  background: #74BF43 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);
}

#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  box-shadow: none;
  filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
}

#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  width: 7px;
  height: 7px;
  min-width: 0;
  border-radius: 50%;
  /* "!important" is necessary to override the rule in toolbarbutton.css */
  margin-top: -1px !important;
  margin-right: -2px !important;
}

#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: #FFBF00;
}

#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: #D90000;
}

#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 13px;
  background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
}

#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
  filter: none;
}

#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 13px;
  background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
}

.panel-subviews {
  padding: 4px;
  background-clip: padding-box;
  border-left: 1px solid var(--arrowpanel-border-color);
  box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
              0 0 7px hsla(210,4%,10%,.1);
  margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
}

.panel-viewstack[viewtype="main"] > .panel-subviews {
  transform: translateX(@menuPanelWidth@);
}

.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  transform: translateX(-@menuPanelWidth@);
}

panelview {
  -moz-box-orient: vertical;
  -moz-box-flex: 1;
}

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

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

#PanelUI-popup .panel-subview-body {
  margin: -4px;
  padding: 4px 4px;
}

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

#appMenu-popup > arrowscrollbox > autorepeatbutton,
#PanelUI-popup > arrowscrollbox > autorepeatbutton {
  display: none;
}

#appMenu-popup > arrowscrollbox > scrollbox,
#PanelUI-popup > arrowscrollbox > scrollbox {
  overflow: visible;
}

#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent,
panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
  overflow: hidden;
}

#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
  padding: 0;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
  line-height: 1.2;
  max-height: 2.4em;
}

.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
  -moz-hyphens: auto;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
  position: absolute;
  clip: rect(-0.1em, auto, 2.6em, auto);
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
  text-align: center;
  /* Need to override toolkit theming which sets margin: 0 !important; */
  margin: 2px 0 0 !important;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
  text-align: center;
  margin: -1px 0 0;
}

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

#PanelUI-contents {
  max-width: @menuPanelWidth@;
}

#BMB_bookmarksPopup,
.panel-mainview:not([panelid="PanelUI-popup"]) {
  max-width: @standaloneSubviewWidth@;
}

#pageActionFeedback > .panel-arrowcontainer > .panel-arrowbox {
  /* Don't display the arrow but keep the popup at the same vertical
     offset as other arrow panels. */
  visibility: hidden;
}

#pageActionFeedback > .panel-arrowcontainer > .panel-arrowcontent {
  background-color: #058b00;
  background-image: none;
  border-radius: 2px;
  color: #fff;
  font-weight: 400;
  font-size: 1.1rem;
  -moz-box-align: center;
  padding: 6px 10px;
}

#pageActionFeedbackAnimatableBox {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
}

#pageActionFeedbackAnimatableBox[animate] > #pageActionFeedbackAnimatableImage {
  position: absolute;
  background-image: url(chrome://browser/skin/check-animation.svg);
  background-repeat: no-repeat;
  min-width: 266px;
  max-width: 266px;
  min-height: 14px;
  max-height: 14px;
  animation-name: page-action-feedback-animation;
  animation-duration: 300ms;
  animation-delay: 60ms;
  animation-fill-mode: forwards;
  animation-timing-function: steps(18);
}

#pageActionFeedbackAnimatableBox[animate] > #pageActionFeedbackAnimatableImage:-moz-locale-dir(rtl) {
  animation-name: page-action-feedback-animation-rtl;
  transform: translateX(252px);
}

@keyframes page-action-feedback-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-252px);
  }
}

@keyframes page-action-feedback-animation-rtl {
  from {
    transform: translateX(252px);
  }
  to {
    transform: translateX(0);
  }
}

#pageActionFeedbackMessage {
  margin-inline-start: 7px;
  margin-inline-end: 0;
  transform: scale(.8);
  opacity: 0;
  transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
              opacity 60ms linear;
}

#pageActionFeedbackAnimatableBox[animate] + #pageActionFeedbackMessage {
  transform: scale(1);
  opacity: 1;
}

/* Give WebExtension stand-alone panels extra width for Chrome compatibility */
.cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
  max-width: 800px;
}

.cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
}

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

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

.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 4px 0;
}

/* START photonpanelview adjustments */

#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent,
panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
}

photonpanelmultiview panelview {
  background: var(--arrowpanel-background);
  padding: 0;
}

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

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

photonpanelmultiview .panel-subview-body {
  padding: 6px 0;
}

/* END photonpanelview adjustments */

.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
  padding-bottom: 0;
}

#PanelUI-contents {
  display: block;
  flex: 1 0 auto;
  margin-left: auto;
  margin-right: auto;
  padding: .5em 0;
  max-width: @menuPanelWidth@;
}

#PanelUI-contents-scroller {
  -moz-box-flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: @menuPanelWidth@;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-align: center;
}

/* Allow box layout to take over when the view exceeds the available space. */
#PanelUI-mainView:not([exceeding]) > #PanelUI-contents-scroller {
  display: flex;
}

.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.panelUI-grid .toolbarbutton-1,
.panel-customization-placeholder-child {
  -moz-appearance: none;
  -moz-box-orient: vertical;
  width: calc(@menuPanelButtonWidth@);
  height: calc(51px + 2.2em);
}

.animate-out {
  animation-name: widget-animate-out;
  animation-fill-mode: forwards;
  animation-duration: 500ms;
  animation-timing-function: var(--animation-easing-function);
}

@keyframes widget-animate-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0 ;
    transform: scale(.5);
  }
}

toolbarpaletteitem[place=panel] > .toolbarbutton-1 {
  -moz-box-flex: 1;
}

/* Help SDK buttons fit in. */
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon,
toolbarpaletteitem[place="panel"] > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .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 {
  -moz-appearance: none;
  -moz-box-orient: vertical;
  padding: 12px 0 9px;
  margin: 0;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
  -moz-appearance: none;
  -moz-box-orient: vertical;
  width: calc(@menuPanelButtonWidth@ - 2px);
  height: calc(49px + 2.2em);
  border: 0;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
  margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
}

.panel-customization-placeholder-child {
  margin: 6px 0 0;
  padding: 2px 6px;
  border: 1px solid transparent;
}

.panelUI-grid .toolbarbutton-1[type="menu"] {
  background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
  background-position: right 3px top 16px;
  background-repeat: no-repeat;
}

.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
  background-position: left 3px top 16px;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
  display: none;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  -moz-box-align: center;
  width: 16px;
  margin-inline-start: -16px;
  height: 51px;
  margin-bottom: 2.2em;
  padding: 0;
}

.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
  background-color: var(--arrowpanel-dimmed) !important;
  border-radius: 0 0 0 2px;
}

.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
  border-radius: 0 0 2px 0;
}

#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
  opacity: .5;
}

toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
  width: calc(@menuPanelButtonWidth@);
  margin: 0 !important;
}

toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
  -moz-box-align: center;
  -moz-box-pack: center;
}

toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
  margin: 4px auto;
}

#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
  background-color: var(--arrowpanel-dimmed);
}

#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-footer-inner > toolbarseparator,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
  opacity: .5;
}

/*
 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
 * which was affecting subview display. Because of this, we're hiding the iframe *only*
 * when displaying a subview. The discerning user might notice this, but it's not nearly
 * as bad as the brokenness.
 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
 * is addressed.
 */
#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
  visibility: hidden;
}

toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
  text-align: center;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
.panel-customization-placeholder-child > .toolbarbutton-icon {
  width: @panelPaletteIconSize@;
  height: @panelPaletteIconSize@;
  min-width: @panelPaletteIconSize@;
  min-height: @panelPaletteIconSize@;
}

.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
.panel-customization-placeholder-child > .toolbarbutton-icon {
  /* Explanation for the below formula (A / B - C)
     A
       Each button is @menuPanelButtonWidth@ wide
     B
       Each button has two margins.
     C (46px / 2 = 23px)
       The button icon is 32 pixels wide.
       The button has 12px of horizontal padding (6 on each side).
       The button has 2px of horizontal border (1 on each side).
       Total width of button's icon + button padding should therefore be 46px,
       which means each horizontal margin should be the half the button's width - (46/2) px.
  */
  margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
}

/* 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,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  width: @panelPaletteIconSize@;
  height: @panelPaletteIconSize@;
  min-width: @panelPaletteIconSize@;
  min-height: @panelPaletteIconSize@;
  margin: 0;
  padding: 0;
}

#edit-controls@inAnyPanel@ > #copy-button,
#zoom-controls@inAnyPanel@ > #zoom-reset-button {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

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

#PanelUI-footer {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--arrowpanel-dimmed);
  padding: 0;
  margin: 0;
}

#main-window[customizing] #PanelUI-fxa-container {
  display: none;
}

#PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon {
  display: none;
}

#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after {
  content: url(chrome://browser/skin/warning.svg);
  filter: drop-shadow(0 1px 0 hsla(206,50%,10%,.15));
  width: 47px;
  padding-top: 1px;
  display: block;
  text-align: center;
  position: relative;
  top: 25%;
}

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

.addon-banner-item {
  background-color: var(--appmenu-yellow-warning-color);
  /* Force border to override `.addon-banner-item` selector below */
  border-top: 1px solid var(--appmenu-yellow-warning-border-color) !important;
  display: flex;
  flex: 1 1 0%;
  width: calc(@menuPanelWidth@ + 30px);
  padding-inline-start: 15px;
  border-inline-start-style: none;
}

.addon-banner-item:hover {
  background-color: var(--appmenu-yellow-warning-hover-color);
}

.addon-banner-item:active {
  background-color: var(--appmenu-yellow-warning-active-color);
}

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

.addon-banner-item::after {
  background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
}

#PanelUI-fxa-status {
  display: flex;
  flex: 1 1 0%;
  width: 1px;
}

#PanelUI-footer-inner,
#PanelUI-fxa-container:not([hidden]) {
  display: flex;
  border-top: 1px solid var(--panel-separator-color);
}

#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
#PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container {
  position: relative;
}

#PanelUI-footer-inner > toolbarseparator,
#PanelUI-fxa-container > toolbarseparator {
  border: 0;
  border-left: 1px solid var(--panel-separator-color);
  margin: 7px 0 7px;
  -moz-appearance: none;
}

#PanelUI-footer-inner:hover > toolbarseparator,
#PanelUI-fxa-container:hover > toolbarseparator {
  margin: 0;
}

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

.panel-banner-item {
  border-top: 1px solid var(--panel-separator-color);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

/* in Photon, we have a bottom border as well. Reconcile with the above rule
 * after photon launch. */
#appMenu-mainView > .panel-subview-body > .panel-banner-item {
  border-bottom: 1px solid var(--panel-separator-color);
  margin-bottom: 3px;
  padding-inline-start: 12px;
}

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

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

/* FxAccount indicator bits. */

/* Add the .toolbaritem-combined-buttons class to increase the specificity so as
 * to override the end margin for .toolbaritem-combined-buttons items further down. */
#appMenu-fxa-container.toolbaritem-combined-buttons:not([fxastatus="signedin"]) {
  margin-inline-end: 0;
}

#appMenu-fxa-label,
#appMenu-fxa-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  list-style-image: url(chrome://browser/skin/sync.svg);
}

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

@keyframes syncRotate {
  to { transform: rotate(360deg); }
}

#appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon,
#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon {
  animation: syncRotate 0.8s linear infinite;
  fill: #0a84ff;
}

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

#appMenu-fxa-avatar {
  pointer-events: none;
  list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
}

/* Handle different UI states. */
#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
#appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
  display: none;
}

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

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

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

#appMenu-fxa-container[fxastatus="login-failed"],
#appMenu-fxa-container[fxastatus="unverified"] {
  background-color: var(--appmenu-yellow-warning-color);
  border-top: 1px solid var(--appmenu-yellow-warning-border-color);
  border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
}

#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
  background-color: var(--appmenu-yellow-warning-hover-color);
}

#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
  background-color: var(--appmenu-yellow-warning-active-color);
}

#PanelUI-help,
#PanelUI-quit {
  min-width: 46px;
}

.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text,
#PanelUI-fxa-label > .toolbarbutton-text,
#PanelUI-customize > .toolbarbutton-text {
  margin: 0;
  padding: 0 6px;
  text-align: start;
}

#PanelUI-help > .toolbarbutton-text,
#PanelUI-quit > .toolbarbutton-text,
#PanelUI-fxa-avatar > .toolbarbutton-text {
  display: none;
}

.addon-banner-item > .toolbarbutton-icon,
.panel-banner-item > .toolbarbutton-icon,
#PanelUI-fxa-label > .toolbarbutton-icon,
#PanelUI-fxa-icon > .toolbarbutton-icon,
#PanelUI-customize > .toolbarbutton-icon,
#PanelUI-help > .toolbarbutton-icon,
#PanelUI-quit > .toolbarbutton-icon {
  margin-inline-end: 0;
}

#PanelUI-fxa-icon {
  padding-inline-start: 15px;
  padding-inline-end: 15px;
}

#PanelUI-fxa-label,
.addon-banner-item,
#PanelUI-customize {
  flex: 1;
  padding-inline-start: 15px;
  border-inline-start-style: none;
}

#PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
  padding-inline-start: 0px;
}

/* descend from #PanelUI-footer to add specificity, or else the
   padding-inline-start will be overridden */
#PanelUI-footer > .panel-banner-item {
  width: calc(@menuPanelWidth@ + 30px);
  padding-inline-start: 15px;
  border-inline-start-style: none;
}

#PanelUI-remotetabs {
  --panel-ui-sync-illustration-height: 157.5px;
}

.PanelUI-remotetabs-instruction-title,
.PanelUI-remotetabs-instruction-label,
#PanelUI-remotetabs-mobile-promo {
  /* 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: 15px;
  text-align: center;
  text-shadow: none;
  max-width: 15em;
  color: GrayText;
}

.PanelUI-remotetabs-instruction-title {
  font-size: 1.3em;
}

/* The boxes with "instructions" get extra top and bottom padding for space
   around the illustration and buttons */
.PanelUI-remotetabs-instruction-box {
  /* If you change the padding here, the min-height of the synced tabs panel
    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
    need adjusting (see bug 1248506) */
  padding-bottom: 30px;
  padding-top: 15px;
}

.PanelUI-remotetabs-prefs-button {
  -moz-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;
  font-size: 13px;
  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-top: 10px;
  margin-bottom: 10px;
  padding: 8px;
  text-shadow: none;
  min-width: 200px;
}

.PanelUI-remotetabs-prefs-button:hover {
  background-color: #003eaa;
}

.PanelUI-remotetabs-prefs-button:hover:active {
  background-color: #002275;
}

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

.PanelUI-remotetabs-notabsforclient-label {
  color: GrayText;
  /* This margin is to line this label up with the labels in toolbarbuttons. */
  margin-left: 28px;
}

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

.fxaSyncIllustration {
  width: 180px;
  height: var(--panel-ui-sync-illustration-height);
  list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
  -moz-context-properties: fill;
  fill: #cdcdcd;
}

.PanelUI-remotetabs-prefs-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-reauthsync,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
  min-height: calc(var(--panel-ui-sync-illustration-height) +
                   20px + /* margin of .PanelUI-remotetabs-prefs-button */
                   16px + /* padding of .PanelUI-remotetabs-prefs-button */
                   30px + /* margin of .PanelUI-remotetabs-instruction-label */
                   30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
                   11em);
}

#PanelUI-remotetabs-tabslist > label[itemtype="client"] {
  color: GrayText;
}

/* 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-customize {
  list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
}

#customization-panelHolder #PanelUI-customize {
  list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png);
}

#PanelUI-help {
  list-style-image: url(chrome://browser/skin/menuPanel-help.png);
}

#PanelUI-quit {
  border-inline-end-style: none;
  list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
}

#PanelUI-fxa-label,
#PanelUI-fxa-icon,
.addon-banner-item,
#PanelUI-customize,
#PanelUI-help,
#PanelUI-quit {
  -moz-image-region: rect(0, 16px, 16px, 0);
}

#PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
  display: none;
}

#PanelUI-fxa-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  align-self: center;
  margin: 0px 7px;
  padding: 0px;
  border: 0px none;
  margin-inline-end: 0;
}

#PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
  list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
}

#PanelUI-customize:hover,
#PanelUI-help:not([disabled]):hover,
#PanelUI-quit:not([disabled]):hover {
  -moz-image-region: rect(0, 32px, 16px, 16px);
}

#PanelUI-customize:hover:active,
#PanelUI-help:not([disabled]):hover:active,
#PanelUI-quit:not([disabled]):hover:active {
  -moz-image-region: rect(0, 48px, 16px, 32px);
}

#PanelUI-help[panel-multiview-anchor="true"] {
  -moz-image-region: rect(0, 64px, 16px, 48px);
}

#PanelUI-help[disabled],
#PanelUI-quit[disabled] {
  opacity: 0.4;
}

#PanelUI-fxa-status:hover,
#PanelUI-fxa-icon:hover,
#PanelUI-help:not([disabled]):hover,
#PanelUI-customize:hover,
#PanelUI-quit:not([disabled]):hover {
  outline: 1px solid var(--arrowpanel-dimmed);
  background-color: var(--arrowpanel-dimmed);
}

#PanelUI-fxa-status:hover:active,
#PanelUI-fxa-icon:hover:active,
#PanelUI-help:not([disabled]):hover:active,
#PanelUI-customize:hover:active,
#PanelUI-quit:not([disabled]):hover:active {
  outline: 1px solid var(--arrowpanel-dimmed-further);
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

#PanelUI-fxa-status:hover,
#PanelUI-fxa-status:hover:active,
#PanelUI-fxa-icon:hover,
#PanelUI-fxa-icon:hover:active {
  outline: none;
}

#PanelUI-fxa-container[fxastatus="login-failed"],
#PanelUI-fxa-container[fxastatus="unverified"] {
  background-color: hsl(42,94%,88%);
  border-top: 1px solid hsl(42,94%,70%);
}

#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover {
  background-color: hsl(42,94%,85%);
}

#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active {
  background-color: hsl(42,94%,82%);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

.panel-banner-item {
  color: black;
  background-color: hsla(96,65%,75%,.5);
}

.panel-banner-item:not([disabled]):hover {
  background-color: hsla(96,65%,75%,.8);
}

.panel-banner-item:not([disabled]):hover:active {
  background-color: hsl(96,65%,75%);
}

#PanelUI-quit:not([disabled]):hover {
  background-color: #d94141;
  outline-color: #c23a3a;
}

#PanelUI-quit:not([disabled]):hover:active {
  background-color: #ad3434;
  outline-color: #992e2e;
}

#customization-panelHolder #PanelUI-customize {
  color: white;
  background-color: hsl(108,66%,30%);
  text-shadow: none;
  margin-top: -1px;
}

#customization-panelHolder #PanelUI-customize + toolbarseparator {
  display: none;
}

#customization-panelHolder #PanelUI-customize:hover {
  background-color: hsl(109,65%,26%);
}

#customization-panelHolder #PanelUI-customize:hover:active {
  background-color: hsl(109,65%,22%);
}

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

.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
  -moz-appearance: none;
  margin: 0;
  min-height: 24px;
  padding: 4px 12px;
  background-color: transparent;
}

.subviewbutton:focus {
  outline: 0;
}

.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,
.subviewbutton > .menu-accel-container > .menu-iconic-accel,
.subviewbutton > .menu-iconic-left,
.subviewbutton > .menu-iconic-text {
  padding-bottom: 0;
  padding-top: 0;
}

.addon-banner-item > .toolbarbutton-text,
.subviewbutton-iconic > .toolbarbutton-text,
.cui-withicon > .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. */
}

.panel-banner-item > .toolbarbutton-multiline-text {
  font: menu;
  margin: 0;
  padding: 0;
  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;
}

/* 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;
}

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

#widget-overflow-fixed-list .toolbarbutton-1 > .toolbarbutton-text,
#widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text,
.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
.addon-banner-item > .toolbarbutton-text,
/* Bookmark items need a more specific selector. */
.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
  font: menu;
}

.subviewbutton[shortcut]::after {
  content: attr(shortcut);
  float: right;
  color: GrayText;
}

.PanelUI-subView .subviewbutton-nav::after {
  -moz-context-properties: fill;
  content: url(chrome://browser/skin/back-12.svg);
  fill: GrayText;
  float: right;
  transform: translateY(1px);
}

.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(ltr)::after {
  transform: scaleX(-1) translateY(1px);
}

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

.subviewbutton[type="highlight-bookmark"]::after {
  content: url("chrome://browser/skin/bookmark-hollow.svg");
}

.subviewbutton[type="highlight-history"]::after {
  content: url("chrome://browser/skin/history.svg");
}

.subviewbutton[type="highlight-bookmark"]::after,
.subviewbutton[type="highlight-history"]::after {
  -moz-context-properties: fill;
  fill: GrayText;
  float: right;
  opacity: .5;
  /* Centers the icon and resizes it to 12px square. */
  transform: translateY(2px) scaleX(.75);
}

/* This is a <label> but it should fit in with the menu font- and colorwise. */
#PanelUI-characterEncodingView-autodetect-label {
  font: menu;
  color: inherit;
}

/* START photon adjustments */

photonpanelmultiview .subviewbutton[checked="true"] {
  background: none;
  list-style-image: url(chrome://browser/skin/check.svg);
}

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

#appMenu-popup .toolbaritem-combined-buttons {
  -moz-box-align: center;
  -moz-box-orient: horizontal;
  border: 0;
  border-radius: 0;
  margin-inline-end: 8px;
}

photonpanelmultiview .toolbaritem-combined-buttons > label {
  -moz-box-flex: 1;
  font: menu;
  margin: 0;
  padding-inline-start: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
}

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

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

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

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

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

/* Using this selector, because this way the hover and active selectors will apply properly. */
photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
  .subviewbutton:not(.subviewbutton-iconic) {
  background-color: #f9f9f9;
  border: 1px solid #e1e1e1;
  border-radius: 10000px;
  padding: 1px 8px;
}

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

photonpanelmultiview .addon-banner-item::after,
photonpanelmultiview .panel-banner-item::after {
  margin-inline-end: 12px;
  margin-inline-start: 10px;
}

photonpanelmultiview .subview-subheader {
  color: GrayText;
}

photonpanelmultiview .subview-subheader,
photonpanelmultiview .panel-subview-footer {
  font: menu;
}

/* END photon adjustments */

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

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

panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
toolbarbutton.subviewbutton@buttonStateActive@,
menu.subviewbutton@menuStateActive@,
menuitem.subviewbutton@menuStateActive@,
.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-further);
  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@buttonStateHover@ {
  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 {
  font: menu;
  font-weight: normal;
}

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

#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
  -moz-appearance: none;
  margin-top: 0;
  margin-bottom: 0;
}

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

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

/* Popups with only one item don't have a footer */
#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
/* These popups never have a footer */
#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
#BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  /* And so they need some bottom padding: */
  padding-bottom: 4px;
}

/* 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 > .panel-subview-body > toolbarseparator,
.PanelUI-subView menuseparator,
.PanelUI-subView toolbarseparator,
.cui-widget-panelview menuseparator,
.cui-widget-panel toolbarseparator {
  -moz-appearance: none;
  min-height: 0;
  border-top: 1px solid var(--panel-separator-color);
  border-bottom: none;
  margin: 6px 0;
  padding: 0;
}

.PanelUI-subView menuseparator,
.PanelUI-subView toolbarseparator {
  margin-inline-start: -5px;
  margin-inline-end: -4px;
}

.PanelUI-subView menuseparator.small-separator,
.PanelUI-subView toolbarseparator.small-separator {
  margin-left: 5px;
  margin-right: 5px;
}

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

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

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

#PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
#PanelUI-historyItems > toolbarbutton {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
}

#appMenu-fxa-avatar,
#appMenu-fxa-label > .toolbarbutton-icon,
#appMenu-fxa-icon > .toolbarbutton-icon,
#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon,
#PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

toolbarbutton[panel-multiview-anchor="true"],
toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
  color: HighlightText;
  background-color: Highlight;
}

#PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
  display: none;
}

#PanelUI-help[panel-multiview-anchor="true"] {
  background-image: linear-gradient(rgba(255,255,255,0.3), transparent);
  background-position: 0;
}

#PanelUI-help[panel-multiview-anchor="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--panel-ui-exit-subview-gutter-width);
  background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
                    linear-gradient(rgba(255,255,255,0.3), transparent);
  background-repeat: no-repeat;
  background-color: Highlight;
  background-position: left 10px center, 0;
}

#PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
  background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
                    linear-gradient(rgba(255,255,255,0.3), transparent);
  background-position: right 10px center, 0;
}

toolbarbutton[panel-multiview-anchor="true"] {
  background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
                    linear-gradient(rgba(255,255,255,0.3), transparent);
  background-position: right calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
  background-repeat: no-repeat, repeat;
}

toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
  background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
                    linear-gradient(rgba(255,255,255,0.3), transparent);
  background-position: left calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
}

toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menu-dropmarker,
#bookmarks-menu-button[overflowedItem] > .toolbarbutton-menu-dropmarker,
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
  display: none;
}

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

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

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

/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */
toolbarpaletteitem[place=panel] > .toolbaritem-combined-buttons > toolbarbutton {
  min-width: calc(@menuPanelButtonWidth@ - 1px);
  max-width: calc(@menuPanelButtonWidth@ - 1px);
}

#main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
  opacity: .25;
}

#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
%ifdef XP_MACOSX
  min-width: 6ch;
%else
  min-width: 7ch;
%endif
}

#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr),
#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl),
#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr),
#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl),
#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr),
#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl),
#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.toolbaritem-combined-buttons@inAnyPanel@ > separator {
  -moz-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 > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
}

.cui-widget-panelview,
#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;
}

.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(ltr)::after {
    transform: scaleX(-1);
}
.widget-overflow-list .subviewbutton-nav::after {
    margin-inline-start: 10px;
    -moz-context-properties: fill;
    content: url(chrome://browser/skin/back-12.svg);
    fill: GrayText;
    float: right;
}

toolbarpaletteitem[place=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[checked="true"] {
  background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
}

.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
  background-position: center right 7px;
}

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

menuitem[checked="true"].subviewbutton > .menu-iconic-left {
  visibility: hidden;
}

.panel-mainview[panelid=customizationui-widget-panel],
#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,
#PanelUI-panic-timeframe-icon-small {
  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;
}

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

/* current attribute is only set when in use as a subview instead of a main view */
#PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
  display: none;
}

#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
  display: none;
}

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

#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
  margin-bottom: 0;
}

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

.subviewradio {
  -moz-binding: url(chrome://global/content/bindings/radio.xml#radio);
  -moz-appearance: none;
  -moz-box-align: center;
  padding: 1px;
  margin: 0 0 2px;
  background-color: transparent;
  border-radius: 2px;
  border: 1px solid transparent;
}

.subviewradio@buttonStateHover@ {
  background-color: var(--arrowpanel-dimmed);
  border-color: var(--panel-separator-color);
}

.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-further);
  border-color: var(--panel-separator-color);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}

.subviewradio > .radio-check {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #e7e7e7;
  border-radius: 50%;
  margin: 1px 5px;
  background-color: #f1f1f1;
}

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

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

#PanelUI-panic-actionlist-main-label {
  color: GrayText;
  font-size: 0.9em;
}

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

.PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
  background-position: center 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: #C11F14;
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

#PanelUI-panic-view-button {
  -moz-appearance: none;
  background-color: #d92316;
  color: white;
  margin: 5px 15px 11px;
  border: 1px solid #c92014;
  border-radius: 3px;
  padding: 10px;
}

#PanelUI-panic-view-button:hover {
  background-color: #bf1f13;
  border-color: #b81d12;
}

#PanelUI-panic-view-button:hover:active {
  background-color: #99180f;
  border-color: #91170f;
}

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

#panic-button-success-closebutton {
  background-color: #e5e5e5;
  color: black;
  margin: 5px 0 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
  -moz-appearance: none;
}

#panic-button-success-closebutton:hover {
  background-color: #dedede;
  border-color: #bbb;
}

#panic-button-success-closebutton:hover:active {
  background-color: #d0d0d0;
  border-color: #aaa;
}

@media (min-resolution: 1.1dppx) {
  #PanelUI-help[panel-multiview-anchor="true"]::after,
  toolbarbutton[panel-multiview-anchor="true"] {
    background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png),
                      linear-gradient(rgba(255,255,255,0.3), transparent);
    background-size: 16px, auto;
  }

  #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after,
  toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
    background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl@2x.png),
                      linear-gradient(rgba(255,255,255,0.3), transparent);
  }

  .panel-banner-item[notificationid^=update] {
    list-style-image: url(chrome://branding/content/icon32.png);
  }

  #PanelUI-customize {
    list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png);
  }

  #customization-panelHolder #PanelUI-customize {
    list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish@2x.png);
  }

  #PanelUI-help {
    list-style-image: url(chrome://browser/skin/menuPanel-help@2x.png);
  }

  #PanelUI-quit {
    list-style-image: url(chrome://browser/skin/menuPanel-exit@2x.png);
  }

  #PanelUI-fxa-label,
  #PanelUI-fxa-icon,
  #PanelUI-customize,
  #PanelUI-help,
  #PanelUI-quit {
    -moz-image-region: rect(0, 32px, 32px, 0);
  }

  .panel-banner-item > .toolbarbutton-icon,
  #PanelUI-fxa-label > .toolbarbutton-icon,
  #PanelUI-fxa-icon > .toolbarbutton-icon,
  #PanelUI-customize > .toolbarbutton-icon,
  #PanelUI-help > .toolbarbutton-icon,
  #PanelUI-quit > .toolbarbutton-icon {
    width: 16px;
  }

  #PanelUI-customize:hover,
  #PanelUI-help:not([disabled]):hover,
  #PanelUI-quit:not([disabled]):hover {
    -moz-image-region: rect(0, 64px, 32px, 32px);
  }

  #PanelUI-customize:hover:active,
  #PanelUI-help:not([disabled]):hover:active,
  #PanelUI-quit:not([disabled]):hover:active {
    -moz-image-region: rect(0, 96px, 32px, 64px);
  }

  #PanelUI-help[panel-multiview-anchor="true"] {
    -moz-image-region: rect(0, 128px, 32px, 96px);
    background-size: auto;
  }

  .subviewbutton[checked="true"] {
    background-image: url("chrome://global/skin/menu/shared-menu-check@2x.png");
  }

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

  #PanelUI-panic-timeframe-icon-small {
    list-style-image: url(chrome://browser/skin/panic-panel/header-small@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);
  }
}

/* START photon adjustments */

.panel-header {
  align-items: center;
  border-bottom: 1px solid var(--panel-separator-color);
  display: flex;
  flex: 1 auto;
  height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
  padding: 4px;
}

.panel-header > label {
  flex: auto;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  /* Add the size of the back button to center properly. */
  margin-inline-end: 32px;
  text-align: center;
}

photonpanelmultiview .PanelUI-subView .panel-header > .subviewbutton-back {
  -moz-context-properties: fill;
  fill: var(--arrowpanel-color);
  list-style-image: url(chrome://browser/skin/arrow-left.svg);
  padding: 8px;
}

.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.panel-header > .subviewbutton-back > .toolbarbutton-text {
  /* !important to override .cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text
   * selector further down. */
  display: none !important;
}

photonpanelmultiview .PanelUI-subView toolbarseparator {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* This is explicitly overriding the overflow properties set above. */
photonpanelmultiview .cui-widget-panelview {
  overflow-x: visible;
  overflow-y: visible;
}

photonpanelmultiview #panelMenu_pocket {
  display: none;
}

.subviewbutton.download {
  -moz-box-align: start;
  min-height: 48px;
  padding-inline-start: 8px;
}

.subviewbutton.download > .toolbarbutton-icon,
.subviewbutton.download > .toolbarbutton-text > label {
  margin: 4px 0 0;
}

.subviewbutton.download > .toolbarbutton-icon {
  width: 32px;
  height: 32px;
}

.subviewbutton.download > .toolbarbutton-text > .status-text {
  color: GrayText;
  font-size: .9em;
}

.subviewbutton.download > .action-button {
  -moz-appearance: none; /* To avoid native Windows hover styling */
  -moz-context-properties: fill;
  fill: currentColor;
%ifdef XP_MACOSX
  list-style-image: url("chrome://browser/skin/search-glass.svg");
%else
  list-style-image: url("chrome://browser/skin/folder.svg");
%endif
  /* Measurement to vertically center this button: 1 line of text minus half of 4px top margin. */
  margin: calc(1em - 2px) 0 0;
  padding: 4px;
}

.subviewbutton.download[retryLabel] > .action-button {
  list-style-image: url("chrome://browser/skin/reload.svg");
}

.subviewbutton.download:not([openLabel]):not([retryLabel]) > .action-button {
  fill: GrayText;
  opacity: .5;
}

.subviewbutton.download:-moz-any([openLabel],[retryLabel]) > .action-button@buttonStateHover@ {
  background-color: var(--arrowpanel-dimmed-further);
}

.subviewbutton.download:-moz-any([openLabel],[retryLabel]) > .action-button@buttonStateActive@ {
  background-color: var(--arrowpanel-dimmed-even-further);
}

/* END photon adjustments */