/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:root .cui-widget-panel {
  --menu-panel-width: 22.35em;
  --wide-menu-panel-width: 29em;
  --panel-palette-icon-size: 16px;
  --panel-separator-margin: 4px 8px;

  /* XXX This is the ugliest bit of code I think I've ever written for Mozilla.
  Basically, the [extra 0.1px in the 1.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 */
  /* stylelint-disable-next-line */
  --menu-panel-button-width: calc(--menu-panel-width / 3 - 1.1px);
  /* Complement the .subviewbutton margin. */
  --arrowpanel-padding: 8px 0;
  --arrowpanel-menuitem-border-radius: 3px;
  --appmenu-button-border-color: hsla(210, 4%, 10%, 0.14);
  --appmenu-button-margin: 0 8px;
  --appmenu-button-padding: 6px;
  --appmenu-combined-radio-button-padding: 4px 8px;
  --appmenu-fontsize-icon-size: 20px;
  --appmenu-fontsize-reset-button-width: 47px;
  --appmenu-warning-background-color: #ffefbf;
  --appmenu-warning-background-color-hover: #ffe8a2;
  --appmenu-warning-background-color-active: #ffe38f;
  --appmenu-warning-color: black;
  --appmenu-warning-border-color: hsl(45, 100%, 77%);
  --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-70) 20%, transparent);
  --appmenu-icons-stroke: var(--color-ink-70);
}

@media (prefers-color-scheme: dark) {
  :root .cui-widget-panel {
    --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-10) 20%, transparent);
    --appmenu-icons-stroke: var(--color-ink-10);
  }
}

@media (prefers-contrast) {
  :root .cui-widget-panel {
    --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
    --appmenu-icons-stroke: currentColor;
  }
}

/* UI Density customization */

:root[uidensity="compact"] .cui-widget-panel {
  --arrowpanel-padding: 4px 0;
  --appmenu-button-margin: 0 4px;
  --appmenu-button-padding: 3px;
  --appmenu-combined-radio-button-padding: 2px 6px;
  --appmenu-fontsize-icon-size: 16px;
  --appmenu-fontsize-reset-button-width: 41px;
}

:root[uidensity="touch"] .cui-widget-panel {
  --appmenu-button-padding: 9px;
  --appmenu-combined-radio-button-padding: 6px 10px;
  --appmenu-fontsize-icon-size: 24px;
  --appmenu-fontsize-reset-button-width: 51px;
}

:root[lwt-popup-brighttext] .cui-widget-panel {
  --appmenu-button-border-color: rgba(249, 249, 250, 0.2);
  --appmenu-warning-background-color: hsla(55, 100%, 50%, .1);
  --appmenu-warning-background-color-hover: hsla(55, 100%, 50%, .2);
  --appmenu-warning-background-color-active: hsla(55, 100%, 50%, .3);
  --appmenu-warning-color: #f9f9fa;
  --appmenu-warning-border-color: hsla(55, 100%, 50%, .3);
}

panelview:not([visible]) {
  visibility: collapse;
}

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

panelview {
  flex-direction: column;
  background: var(--arrowpanel-background);
  padding: 0;
}

/* Prevent a scrollbar from appearing while the animation for transitioning from
   one view to another runs, which would otherwise happen if the new view has
   more height than the old one because that would mean that during the
   animation the height of the multiview will be too short for the new view. */
panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
  overflow-y: hidden;
}

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

.panel-view-body-unscrollable {
  overflow: hidden;
  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 {
  flex: 1;
}

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

#appmenu-edit-button {
  margin-inline: 0 3px;
  padding-inline: 7px;
}

#appmenu-edit-button::after {
  margin-inline-start: 0;
}

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

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

#customizationui-widget-multiview #appMenu-libraryView,
#widget-overflow panelview {
  min-width: var(--wide-menu-panel-width);
  max-width: var(--wide-menu-panel-width);
}

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

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

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

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

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

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

/* Help webextension buttons fit in. */
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  height: var(--panel-palette-icon-size);
  width: var(--panel-palette-icon-size);
}

#customization-palette .toolbarbutton-1 {
  appearance: none;
  flex-direction: column;
  padding: 12px 0 9px;
  margin: 0;
}

/* above we treat the container as the icon for the margins, that is so the
/* badge itself is positioned correctly. Here we make sure that the icon itself
/* has the minimum size we want, but no padding/margin. */
.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  width: var(--panel-palette-icon-size);
  height: var(--panel-palette-icon-size);
  min-width: var(--panel-palette-icon-size);
  min-height: var(--panel-palette-icon-size);
  margin: 0;
  padding: 0;
}

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

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

menuitem.subviewbutton {
  appearance: none !important;
}

.subviewbutton > .menu-text {
  appearance: none;
  margin-inline-start: 0 !important;
}

.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
menu.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
  appearance: none;
  margin: var(--appmenu-button-margin);
  min-height: 24px;
  padding-inline: 8px;
  padding-block: var(--appmenu-button-padding);
  border-radius: var(--arrowpanel-menuitem-border-radius);
  background-color: transparent;
}

.subviewbutton:focus {
  outline: 0;
}

.subviewbutton[disabled="true"],
.subviewbutton[disabled="true"]:hover,
.subviewbutton[checked="true"][disabled="true"],
.subviewbutton[checked="true"][disabled="true"]:hover {
  color: var(--text-color-deemphasized);
  background-color: transparent;
}

.subviewbutton > .toolbarbutton-text {
  padding: 0;
  padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */
}

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

.addon-banner-item > .toolbarbutton-icon,
.subviewbutton-iconic > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, stroke;
}

.addon-banner-item > .toolbarbutton-icon {
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.subviewbutton-iconic > .toolbarbutton-icon {
  fill: var(--appmenu-icons-fill);
  stroke: var(--appmenu-icons-stroke);
}

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

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

.subviewbutton[shortcut]::after {
  content: attr(shortcut);
  float: inline-end;
}

.PanelUI-subView .subviewbutton-nav::after {
  -moz-context-properties: stroke, fill-opacity;
  content: var(--icon-nav-right-sm);
  stroke: currentColor;
  fill-opacity: 0.6;
  float: inline-end;
}

.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
  content: var(--icon-nav-left-sm);
}

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

.subviewbutton[checked="true"] {
  list-style-image: var(--icon-check);
  -moz-context-properties: stroke;
  stroke: currentColor;
  color: inherit;
}

#appMenu-popup .toolbaritem-combined-buttons {
  align-items: center;
  flex-direction: row;
  border: 0;
  border-radius: 0;
  margin-inline-end: 6px;
  padding-block: 0;
}

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

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 {
  flex: 1;
  width: 20px; /* a little bigger than the width of the scrollbar */
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
  flex: 0 0;
  height: auto;
  margin-inline-start: 18px;
  min-width: auto;
  padding-inline: 5px;
  padding-block: var(--appmenu-button-padding);
  --focus-outline-offset: 1px;
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic {
  padding-inline: var(--appmenu-button-padding);
}

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

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"] {
  margin-inline-start: 0;
  margin-block: 1px;
  padding: var(--appmenu-combined-radio-button-padding);
  min-height: 22px;
  border: 1px solid var(--appmenu-button-border-color);
  border-radius: 0;
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:first-of-type {
  border-inline-end: none;
  border-start-start-radius: var(--arrowpanel-menuitem-border-radius);
  border-end-start-radius: var(--arrowpanel-menuitem-border-radius);
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:last-of-type {
  border-inline-start: none;
  border-start-end-radius: var(--arrowpanel-menuitem-border-radius);
  border-end-end-radius: var(--arrowpanel-menuitem-border-radius);
}

.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"][checked="true"] {
  --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
  --appmenu-icons-stroke: currentColor;
  background-color: var(--select-focus-background-color);
  color: var(--select-focus-text-color);
}

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

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

panelview .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
toolbarbutton.subviewbutton:not([disabled],[open],:active):is(:hover,:focus-visible),
menu.subviewbutton:not([disabled],:active)[_moz-menuactive],
menuitem.subviewbutton:not([disabled],:active)[_moz-menuactive],
.widget-overflow-list .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
  toolbarbutton:not([disabled],[open],:active):is(:hover,:focus-visible) {
  color: inherit;
  background-color: var(--arrowpanel-dimmed);
}

panelview .toolbarbutton-1:not([disabled]):is([open],:hover:active),
toolbarbutton.subviewbutton:not([disabled]):is([open],:hover:active),
menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
.widget-overflow-list .toolbarbutton-1:not([disabled]):is([open],:hover:active),
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
  toolbarbutton:not([disabled]):is([open],:hover:active) {
  color: inherit;
  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:not([disabled],:active)[_moz-menuactive],
.subviewbutton.panel-subview-footer:not([disabled],[open],:active):is(:hover,:focus-visible) {
  background-color: var(--arrowpanel-dimmed-further);
}

menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active,
.subviewbutton.panel-subview-footer:not([disabled]):is([open],:hover:active) {
  background-color: var(--arrowpanel-dimmed-even-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

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

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

#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:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton {
  border: 0;
  margin: 0;
  flex: 1;
  padding-block: 4px;
  flex-direction: row;
}

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

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
  opacity: 0.4;
  /* Override toolbarbutton.css which sets the color to GrayText */
  color: inherit;
}

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > separator {
  appearance: none;
  align-items: stretch;
  margin: .5em 0;
  width: 1px;
  height: auto;
  background: var(--panel-separator-color);
  transition-property: margin;
  transition-duration: 10ms;
  transition-timing-function: ease;
}

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]):hover > separator {
  margin: 0;
}

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

.widget-overflow-list {
  width: var(--wide-menu-panel-width);
}

/* 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: var(--wide-menu-panel-width);
  background-repeat: no-repeat;
  background-position: 0 center;
}

.widget-overflow-list .toolbarbutton-1 {
  align-items: center;
  flex-direction: row;
}

.widget-overflow-list .subviewbutton-nav::after {
  margin-inline-start: 10px;
  -moz-context-properties: stroke, fill-opacity;
  content: var(--icon-nav-right-sm);
  stroke: currentColor;
  fill-opacity: 0.6;
  float: inline-end;
}

.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after {
  content: var(--icon-nav-left-sm);
}

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

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

.subviewradio:not([disabled],[open],:active):is(:hover,:focus-visible) {
  background-color: var(--arrowpanel-dimmed);
  border-color: var(--panel-separator-color);
}

.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio:not([disabled]):is([open],:hover:active) {
  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 {
  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;
}

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

.panel-header > h1 {
  display: inline;
  flex: auto;
  font-size: inherit;
  font-weight: 600;
  margin: 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: stroke;
  stroke: var(--arrowpanel-color);
  list-style-image: var(--icon-nav-left-sm);
  padding: 10px;
}

.subviewbutton-back {
  transform: translateY(1px);
  margin: 0 4px;
}

.subviewbutton-back:-moz-locale-dir(rtl) {
  list-style-image: var(--icon-nav-right-sm);
}

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

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

.subviewbutton.download {
  align-items: flex-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: var(--text-color-deemphasized);
  font-size: .9em;
}

.button-appmenu[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: flex;
  background: center no-repeat transparent;
  background-size: contain;
  border: none;
  box-shadow: none;
}

.button-appmenu[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
.button-appmenu[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
.button-appmenu[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
.button-appmenu[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
.button-appmenu[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  margin-top: -3px !important;
  margin-inline-end: -2px !important;
  min-width: 12px;
  min-height: 12px;
  -moz-context-properties: fill;
  fill: var(--color-green-60);
  background-image: var(--icon-notification-sm);
  background-size: 12px;
}

.button-appmenu[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 12px;
  margin-inline-end: -5px !important;
  background-image: var(--icon-warning-sm);
  box-shadow: none;
  border-radius: 0;
  -moz-context-properties: fill, stroke;
  fill: var(--color-amber-30);
  stroke: var(--color-amber-60);
}

.button-appmenu:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Main menu banner menuitems */

.panel-banner-item {
  appearance: none;
  align-items: flex-start;
  margin: var(--appmenu-button-margin);
  padding-inline: 8px;
  padding-block: calc(var(--appmenu-button-padding) + 3px);
  border-radius: var(--arrowpanel-menuitem-border-radius);
  color: var(--button-color);
  background-color: color-mix(in srgb, currentColor 7%, transparent);;
  margin-bottom: 4px;
  font-weight: 600;
}

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

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

.panel-banner-item > .toolbarbutton-text {
  display: inline-block;
  padding: 0;
}

.panel-banner-item > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
  /* Move the icon to appear after the text label. */
  order: 2;
}

.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-image: url(chrome://messenger/skin/icons/app-update-badge.svg);
  background-repeat: no-repeat;
  background-position: center;
  margin-inline-start: 6px;
  -moz-context-properties: fill;
  fill: var(--color-green-60);
}

.addon-banner-item {
  appearance: none;
  font-weight: 600;
  margin: 0 8px 4px;
  padding-inline: 8px;
  padding-block: var(--appmenu-button-padding);
  box-sizing: border-box;
  box-shadow: none;
  color: var(--appmenu-warning-color);
  background-color: var(--appmenu-warning-background-color);
  border-top: 1px solid var(--appmenu-warning-border-color);
  border-inline: 1px solid var(--appmenu-warning-border-color);
  border-radius: var(--arrowpanel-menuitem-border-radius);
  transition: background-color;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, var(--appmenu-warning-color) 20%, transparent);
  stroke: var(--appmenu-warning-color);
}

.addon-banner-item::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-inline: 10px 0;
  display: flex;
  background: var(--icon-warning) no-repeat center;
}

:root[lwt-popup-brighttext] .addon-banner-item::after {
  -moz-context-properties: fill;
  fill: var(--color-amber-30);
}

.addon-banner-item:last-child {
  border-bottom: 1px solid var(--appmenu-warning-border-color);
}

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

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

menulist {
  border: 1px solid var(--button-border-color);
  background-color: var(--button-background-color);
}

menulist:not([disabled="true"],[open="true"]):hover,
menulist[open="true"]:not([disabled="true"]) {
  background-color: var(--button-hover-background-color);
  border-color: var(--button-border-color);
}

/* App Menu items icons */

/* Sync */

#appmenu_signin {
  list-style-image: var(--icon-sync);
}

#appmenu-submenu-sync-now{
  list-style-image: var(--icon-sync);
}

#appmenu-submenu-sync-settings {
  list-style-image: var(--icon-settings);
}

#appmenu-submenu-sync-sign-out{
  list-style-image: var(--icon-quit);
}

#syncSeparator {
  background-color: var(--color-blue-50);
  background-image: linear-gradient(to right, var(--color-teal-40), var(--color-magenta-60));
  height: 1px;
  border: none;
  border-radius: 2px;
}

#appmenu-manage-sync-icon  {
  content: var(--icon-contact);
}

.appmenu-sync-account-email {
  font-weight: 600;
}

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

@media (prefers-reduced-motion: no-preference) {
  #appmenu-submenu-sync-now[syncstatus="active"] > .toolbarbutton-icon {
    animation: syncRotate 0.8s linear infinite;
  }
}

/* New Account and Create */

#appmenu_new {
  list-style-image: var(--icon-new-contact);
}

#appmenu_create {
  list-style-image: var(--icon-add);
}

#appmenu_newNewMsgCmd,
#appmenu_newCreateEmailAccountMenuItem {
  list-style-image: var(--icon-new-mail);
}

#appmenu_newMailAccountMenuItem {
  list-style-image: var(--icon-mail);
}

#appmenu_calendar-new-calendar-menu-item {
  list-style-image: var(--icon-calendar);
}

#appmenu_newAB {
  list-style-image: var(--icon-address-book);
}

#appmenu_newABMenuItem,
#appmenu_newCardDAVMenuItem,
#appmenu_newLdapMenuItem {
  list-style-image: var(--icon-new-address-book);
}

#appmenu_newIMAccountMenuItem {
  list-style-image: var(--icon-chat);
}

#appmenu_newFeedAccountMenuItem {
  list-style-image: var(--icon-rss);
}

#appmenu_newNewsgroupAccountMenuItem {
  list-style-image: var(--icon-newsletter);
}

#appmenu_calendar-new-event-menu-item {
  list-style-image: var(--icon-new-event);
}

#appmenu_calendar-new-task-menu-item {
  list-style-image: var(--icon-new-task);
}

#appmenu_open {
  list-style-image: var(--icon-draft);
}

#appmenu_OpenMessageFileMenuitem {
  list-style-image: var(--icon-mail);
}

#appmenu_OpenCalendarFileMenuitem {
  list-style-image: var(--icon-calendar);
}

#appmenu_View {
  list-style-image: var(--icon-eye);
}

#appmenu_Toolbars {
  list-style-image: var(--icon-spaces-menu);
}

#appmenu_MessagePaneLayout {
  list-style-image: var(--icon-layout);
}

#appmenu_FolderViews {
  list-style-image: var(--icon-folder);
}

#appMenu-uiDensity-controls .toolbarbutton-icon {
  content: var(--icon-spaces-menu);
}

#appMenu-fontSize-controls .toolbarbutton-icon {
  content: var(--icon-font);
}

#appmenu_newCard {
  list-style-image: var(--icon-new-contact);
}

/* Settings */

#appmenu_addons {
  list-style-image: var(--icon-extension);
}

#appmenu_accountmgr {
  list-style-image: var(--icon-account-settings);
}

#appmenu_preferences {
  list-style-image: var(--icon-settings);
}

/* Density Settings */

#appmenu_uiDensityCompact {
  list-style-image: var(--icon-density-compact);
}

#appmenu_uiDensityNormal {
  list-style-image: var(--icon-density-default);
}

#appmenu_uiDensityTouch {
  list-style-image: var(--icon-density-relaxed);
}

/* Font scaling */

#appMenu-fontSizeReduce-button {
  list-style-image: var(--font-size-decrease);
}
#appMenu-fontSizeEnlarge-button {
  list-style-image: var(--font-size-increase);
}

#appMenu-fontSizeReduce-button:hover,
#appMenu-fontSizeReduce-button:focus,
#appMenu-fontSizeReduce-button:active,
#appMenu-fontSizeReset-button:hover,
#appMenu-fontSizeReset-button:focus,
#appMenu-fontSizeReset-button:active,
#appMenu-fontSizeEnlarge-button:hover,
#appMenu-fontSizeEnlarge-button:focus,
#appMenu-fontSizeEnlarge-button:active,
#appMenu-fullscreen-button:hover,
#appMenu-fullscreen-button:focus,
#appMenu-fullscreen-button:active {
  color: unset;
  background-color: unset;
  box-shadow: unset;
}

#appMenu-fontSizeReduce-button > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
  width: var(--appmenu-fontsize-icon-size);
  height: var(--appmenu-fontsize-icon-size);
  -moz-context-properties: fill, stroke;
  fill: var(--button-background-color, ButtonFace);
  stroke: var(--button-color);
  border-radius: 50%;
  margin-block-start: 1px;
  padding: 0;
}

/* Compensate the smaller icon. */
#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
  margin-inline-end: -2px;
}

:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
  margin-inline-end: -1px;
}

#appMenu-fontSizeReset-button > .toolbarbutton-text {
  display: flex;
  justify-content: center;
  border: 1px solid var(--appmenu-button-border-color);
  border-radius: 2px;
  min-width: var(--appmenu-fontsize-reset-button-width);
  text-align: center;
  padding: 2px;
}

#appMenu-fontSizeReset-button:hover > .toolbarbutton-text {
  background-color: var(--button-hover-background-color);
}
#appMenu-fontSizeReduce-button:hover > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:hover > .toolbarbutton-icon {
  fill: var(--button-hover-background-color);
}

#appMenu-fontSizeReset-button:active > .toolbarbutton-text {
  background-color: var(--button-active-background-color);
}
#appMenu-fontSizeReduce-button:active > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:active > .toolbarbutton-icon {
  fill: var(--button-active-background-color);
}

#appMenu-fontSizeReset-button:focus > .toolbarbutton-text,
#appMenu-fontSizeReduce-button:focus > .toolbarbutton-icon,
#appMenu-fontSizeEnlarge-button:focus > .toolbarbutton-icon {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

#appMenu-fontSize-controls > .subviewbutton {
  margin-inline-start: 2px;
  padding: 3px;
}

#appMenu-fontSize-controls > #appMenu-fontSizeEnlarge-button {
  padding-inline-end: 0;
}

:root[uidensity="compact"] #appMenu-fontSizeReduce-button > .toolbarbutton-icon,
:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
  margin-block-start: 2px;
}

/* Tools */

#appmenu_import {
  list-style-image: var(--icon-import);
}

#appmenu_export {
  list-style-image: var(--icon-export);
}

#appmenu_searchCmd {
  list-style-image: var(--icon-search);
}

#appmenu_filtersCmd {
  list-style-image: var(--icon-filter);
}

#appmenu_openSavedFilesWnd {
  list-style-image: var(--icon-download);
}

#appmenu_manageKeysOpenPGP {
  list-style-image: var(--icon-key);
}

#appmenu_activityManager {
  list-style-image: var(--icon-paste);
}

#appmenu_toolsMenu,
#appmenu_devtoolsToolbox {
  list-style-image: var(--icon-tools);
}

/* Help */

#appmenu_help,
#appmenu_openHelp {
  list-style-image: var(--icon-question);
}

#appmenu_openTour {
  list-style-image: var(--icon-features);
}

#appmenu_keyboardShortcuts {
  list-style-image: var(--icon-shortcut);
}

#appmenu_getInvolved {
  list-style-image: var(--icon-handshake);
}

#appmenu_makeDonation {
  list-style-image: var(--icon-heart);
}

#appmenu_submitFeedback {
  list-style-image: var(--icon-chat);
}

#appmenu_troubleshootMode {
  list-style-image: var(--icon-tools);
}

#appmenu_troubleshootingInfo {
  list-style-image: var(--icon-draft);
}

#appmenu_about {
  list-style-image: var(--icon-info);
}

/* Quit */

#appmenu-quit {
  list-style-image: var(--icon-quit);
}