/*== 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(
    --panel-separator-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;
}

@include NonNativeMenu {
  html#main-window menupopup {
    &:not(.in-menulist) {
      /* Above FF v105 #466 */
      --panel-color: var(--menu-color) !important;
      --panel-background: var(--menu-background-color) !important;
      --panel-border-color: var(--menu-border-color) !important;

      &:not([placespopup]) menuseparator,
      &:not([placespopup]) menuseparator::before,
      &[placespopup] menuseparator::before {
        // #732
        // toolbarbutton menupopup[placespopup] menuseparator::before
        border-color: var(--menu-border-color) !important;
      }

      menu,
      menuitem {
        &[disabled="true"],
        &[_moz-menuactive="true"][disabled="true"] {
          color: var(--menu-disabled-color) !important;
        }

        &[_moz-menuactive="true"]:not([disabled="true"]) {
          background-color: var(--menuitem-hover-background-color) !important;
          color: var(--menu-color) !important;
        }
      }
    }

    #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
      > .menu-iconic-left > .menu-iconic-icon {
        background-color: var(--menuitem-hover-background-color) !important;
      }

      &[disabled="true"] > .menu-iconic-left > .menu-iconic-icon {
        background-color: transparent !important;
      }
    }
  }

  @include Light {
    :root[style*="background-noodles-right"] menupopup {
      // Alphen Glow Theme - Like darkmode
      --toolbarbutton-hover-background: rgba(232, 224, 255, 0.11999999731779099)!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.
      */

    background-color: var(--menuitem-hover-background-color) !important;
  }

  /* Fallback background - Set to Legacy. It will be removed Next update
  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, -moz-menuhover) !important;
  }
}

/*== Info Bar Color ==========================================================*/
.container.infobar {
  background-color: var(--urlbar-box-bgcolor) !important;
}
.notification-button {
  background-color: var(--button-bgcolor) !important;

  &:hover {
    background-color: var(--button-hover-bgcolor) !important;
  }
  &:hover:active {
    background-color: var(--button-active-bgcolor) !important;
  }
}
.notification-button.primary {
  background-color: var(--button-primary-bgcolor) !important;

  &:hover {
    background-color: var(--button-primary-hover-bgcolor) !important;
  }
  &:hover:active {
    background-color: var(--button-primary-active-bgcolor) !important;
  }
}

html|button.ghost-button:not(.semi-transparent):enabled:hover {
  background-color: var(--button-hover-bgcolor) !important;
}
html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
  background-color: var(--in-content-button-background-active) !important;
}

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

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

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

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

/*== Sidebar - Field Color ===================================================*/
html[lwt-sidebar]:not(#main-window) body {
  background-color: var(--lwt-sidebar-background-color, Field) !important;
  color: var(--lwt-sidebar-text-color, FieldText) !important;
}

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

  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"] {
  @include AccentColor {
    border-color: $accentColor !important; /* Hard Coded */
    outline-color: $accentColor !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));

  > 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,
  &[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
  &[originaltype="login"] > .ac-site-icon,
  &[originaltype="insecureWarning"] > .ac-site-icon {
    fill: GrayText !important;
  }

  &[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) */
  }

  &[originaltype="loginsFooter"]:hover,
  &[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 */
  }

  &[originaltype="insecureWarning"] {
    background-color: var(--panel-bgcolor) !important; /* Original: var(--arrowpanel-dimmed) */
    &:hover {
      background-color: var(--arrowpanel-dimmed, hsla(0deg, 0%, 80%, 0.35)) !important;
    }

    > .ac-title {
      color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: var(--grey-60) */
    }
  }
}
