/*== Menu Color ==============================================================*/
html#main-window menupopup:not(.in-menulist) {
  /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
  --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important;
  --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important;

  --menu-border-color: var(
    --toolbarbutton-active-background,
    var(--button-active-bgcolor, var(--card-outline-color))
  ) !important;
  --menuitem-hover-background-color: var(
    --toolbarbutton-hover-background,
    var(--button-hover-bgcolor, var(--in-content-button-background-hover))
  ) !important;

  --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important;
  --menuitem-disabled-hover-background-color: color-mix(
    in srgb,
    var(--menuitem-hover-background-color) 40%,
    transparent
  ) !important;
}

// TODO: `OS` not covered case
@media not all and (-moz-gtk-csd-available) {
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup {
    --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important;
    --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important;
  }
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]),
  window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"]
    menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
    --menuitem-hover-background-color: color-mix(
      in srgb,
      currentColor 17%,
      transparent
    ); /* Looks like toolbar button */
    /* or var(--lwt-sidebar-highlight-background-color)
         If this value is used, unset is required in the default theme.
      */
  }

  /* Fallback background */
  menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) {
    background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important;
  }
}

/* Default theme color preservation */
:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
  --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
  --arrowpanel-background: var(
    --toolbar-bgcolor,
    var(--in-content-button-background)
  ) !important; /* --menu-background-color */
}
@media not all and (-moz-gtk-csd-available) {
  window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */
    window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"]    menupopup {
    /* Default Dark Mode */
    --panel-color: var(--menu-color) !important;
    --panel-background: var(--menu-background-color) !important;
  }
}

/*== Bookmark Popup Color ====================================================*/
#editBMPanel_folderTree:-moz-lwtheme,
#editBMPanel_tagsSelector:-moz-lwtheme {
  appearance: none !important;
  border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
}

#editBMPanel_folderTree:-moz-lwtheme,
#editBMPanel_folderTree:-moz-lwtheme > treechildren,
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image,
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover),
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected),
#editBMPanel_tagsSelector:-moz-lwtheme,
#editBMPanel_tagsSelector:-moz-lwtheme > richlistitem {
  color: var(--lwt-text-color, fieldtext) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) {
  font-weight: 600 !important;
}

#editBMPanel_folderTree:-moz-lwtheme > treechildren,
#editBMPanel_tagsSelector:-moz-lwtheme {
  background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover),
#editBMPanel_tagsSelector > richlistitem:hover {
  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important;
}
#editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected),
#editBMPanel_tagsSelector > richlistitem[selected="true"] {
  background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
}

#editBMPanel_namePicker,
#editBMPanel_tagsField {
  --input-bgcolor: var(--arrowpanel-background, Field);
  --input-color: var(--arrowpanel-color, FieldText);
}

/*== Sidebar - Field Color ===================================================*/
.sidebar-panel #search-box,
xul|search-textbox.tabsFilter {
  --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent);

  appearance: none !important;
  padding: 5px 8px !important;
  border: 1px solid var(--input-bgcolor) !important;
  border-radius: 4px;

  background-color: var(--lwt-sidebar-background-color, Field) !important;
  color: var(--lwt-sidebar-text-color, FieldText) !important;
}
.sidebar-panel:not([lwt-sidebar]) #search-box {
  --input-bgcolor: ThreeDShadow;
}

.sidebar-panel #search-box[focused="true"],
xul|search-textbox.tabsFilter[focused="true"] {
  outline: 1px solid var(--input-bgcolor);
}
.sidebar-panel[lwt-sidebar] #search-box[focused="true"],
body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] {
  --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
}
.sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
  border-color: -moz-accent-color !important; /* Hard Coded */
  outline-color: -moz-accent-color !important;
}

/*= PopupAutoComplete ========================================================*/
#PopupAutoComplete {
  --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background));

  /* overwrite */
  --panel-border-radius: 4px !important; /* Original: 0 */
  --panel-border-color: var(
    --arrowpanel-border-color,
    var(--menu-border-color)
  ) !important; /* Original: ThreeDShadow */

  appearance: none !important;
  background: transparent !important;
  border: none !important;
  clip-path: inset(0 round var(--panel-border-radius));
}

#PopupAutoComplete > richlistbox {
  border-radius: var(--panel-border-radius) !important;
  background-color: var(--panel-bgcolor) !important; /* Original: Field */
  color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */
}
.autocomplete-richlistitem:hover {
  background-color: var(--arrowpanel-dimmed) !important;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
  fill: GrayText !important;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
  --panel-border-color: var(--panel-bgcolor);
  color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */
  background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */
  border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
  background-color: var(
    --arrowpanel-dimmed-further,
    hsla(0, 0%, 80%, 0.5)
  ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */
}