@include moz-pref-media("not userChrome.ui-no-menu-icons") {
  // menu icons

  :root {
    --#{$prefix}-menuicon-margin-inline: 14px;
  }

  #widget-overflow-mainView .panel-subview-body {
    padding-bottom: 0 !important;
  }

  .addon-banner-item,
  .panel-banner-item {
    margin: 2px 4px 2px !important;
    padding-inline: 4px 12px !important;
    padding-block: 6px !important;
    border-radius: 6px !important;
  }

  #appMenu-zoom-controls>.toolbarbutton-text,
  .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
  .subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)>.toolbarbutton-icon+.toolbarbutton-text {
    padding-inline-start: get-var("menuicon-margin-inline") !important;
  }

  // padding for items without icons
  #fxa-manage-account-button>vbox,
  #PanelUI-fxa-menu-syncnow-button>hbox {
    padding-inline-start: calc(16px + get-var("menuicon-margin-inline")) !important;
  }

  .subviewbutton>.toolbarbutton-icon {
    width: 16px !important;
  }

  // fill menu icons
  .panel-subview-body>.subviewbutton {
    -moz-context-properties: fill !important;
  }

  .panel-subview-body>.subviewbutton:not([disabled]) {
    fill: get-var("icon-color-primary") !important;
  }

  .panel-subview-body>.subviewbutton[disabled] {
    fill: get-var("icon-color-secondary") !important;
    color: get-var("text-secondary") !important;
    opacity: 0.6 !important;
  }

  // ------------------
  // set icons
  // ------------------

  // new tab icon
  #appMenu-new-tab-button2,
  #appMenuRecentlyClosedTabs {
    list-style-image: get-var("new-tab-icon") !important;
  }

  // new window icon
  #new-window-button,
  #appMenu-new-window-button2,
  #appMenuRecentlyClosedWindows {
    list-style-image: get-var("new-window-icon") !important;
  }

  // incognito icon
  #appMenu-new-private-window-button2 {
    list-style-image: get-var("incognito-icon") !important;
  }

  // bookmarks icon
  #panelMenuBookmarkThisPage,
  #bookmarks-menu-button,
  #appMenu-bookmarks-button,
  #sidebar-switcher-bookmarks,
  #appMenu-library-bookmarks-button,
  #sidebar-box[sidebarcommand="viewBookmarksSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon {
    list-style-image: get-var("star-icon") !important;

    // make star icon without fill
    -moz-context-properties: fill, fill-opacity !important;
    fill-opacity: 0 !important;
  }

  // history icon
  #history-panelmenu,
  .urlbarView-row[source="history"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
  #urlbar-engine-one-off-item-history,
  #appMenu-history-button,
  #appMenu-library-history-button,
  #sidebar-switcher-history,
  #sidebar-box[sidebarcommand="viewHistorySidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon {
    list-style-image: get-var("history-icon") !important;
  }

  // download icon
  #appMenu-downloads-button,
  #appMenu-library-downloads-button {
    list-style-image: get-var("download-icon") !important;
  }

  // password icon
  #appMenu-passwords-button,
  #password-notification-icon,
  #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 {
    list-style-image: get-var("key-icon") !important;
  }

  // extension icon
  #add-ons-button,
  #appMenu-extensions-themes-button {
    list-style-image: get-var("extension-icon") !important;
  }

  // print icon
  #print-button,
  #appMenu-print-button2 {
    list-style-image: get-var("print-icon") !important;
  }

  // save page as
  #save-page-button,
  #appMenu-save-file-button2 {
    list-style-image: get-var("file-save-icon") !important;
  }

  // find in page
  #find-button,
  #appMenu-find-button2 {
    list-style-image: get-var("find-icon") !important;
  }

  // translate page
  #appMenu-translate-button,
  #translations-button-icon {
    list-style-image: get-var("translate-icon") !important;
  }

  // settings icon
  #preferences-button,
  .search-setting-button>.button-box>.button-icon,
  #appMenu-settings-button,
  .unified-extensions-item-open-menu.subviewbutton {
    list-style-image: get-var("settings-icon") !important;
  }

  // more tools icon
  #appMenu-more-button2 {
    list-style-image: get-var("tools-icon") !important;
  }

  // help icon
  #appMenu-help-button2 {
    list-style-image: get-var("help-icon") !important;
  }

  // zoom icon
  #appMenu-zoom-controls2::before,
  #appMenu-zoom-controls::before {
    content: get-var("zoom-in-icon") !important;
  }

  #appMenu-zoom-controls2::before,
  #appMenu-zoom-controls::before {
    margin-inline-end: 0 !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
  }

  #appMenu-multiView .subviewbutton::before,
  #appMenu-proton-update-banner::before {
    display: inline-flex;
    display: -moz-inline-box;
    width: 16px;
    height: 16px;
  }

  // exit icon
  #appMenu-quit-button2 {
    list-style-image: get-var("exit-icon") !important;
  }

  // multiaccount container icon
  #allTabsMenu-containerTabsButton {
    list-style-image: get-var("multiaccountcontainer-icon") !important;
  }

  // search icon
  #panelMenu_searchBookmarks,
  #appMenuSearchHistory,
  #urlbar:not(.searchButton)>#urlbar-input-container>#identity-box[pageproxystate="invalid"] #identity-icon,
  #allTabsMenu-searchTabs {
    list-style-image: get-var("search-icon") !important;
  }

  // Manage containers icon
  .subviewbutton[data-l10n-id="user-context-manage-containers"] {
    list-style-image: get-var("settings-icon") !important;
  }

  // Show bookmarks toolbar icon
  #panelMenu_viewBookmarksToolbar {
    list-style-image: get-var("toolbar-icon") !important;
  }

  // Manage bookmarks icon
  #panelMenu_showAllBookmarks,
  #PanelUI-historyMore {
    list-style-image: get-var("bookmark-manager-icon") !important;
  }

  // Clear recent history… icon
  #appMenuClearRecentHistory {
    list-style-image: get-var("trash-icon") !important;
  }

  // Customize toolbar… icon
  #appmenu-moreTools-button {
    list-style-image: get-var("edit-icon") !important;
  }

  #appmenu-developer-tools-view,
  #PanelUI-developer-tools-view {

    // Web Developer Tools icon
    .subviewbutton[key="key_toggleToolbox"] {
      list-style-image: get-var("dev-icon") !important;
    }

    // Task Manager icon
    .subviewbutton[key="key_aboutProcesses"] {
      list-style-image: get-var("task-manager-icon") !important;
    }

    // Remote Debugging icon
    .subviewbutton[label="Remote Debugging"] {
      list-style-image: get-var("remote-icon") !important;
    }

    // Browser Toolbox icon
    .subviewbutton[key="key_browserToolbox"] {
      list-style-image: get-var("tools-icon") !important;
    }

    // Browser Console icon
    .subviewbutton[key="key_browserConsole"] {
      list-style-image: get-var("toolbar-icon") !important;
    }

    // Responsive Design Mode icon
    .subviewbutton[key="key_responsiveDesignMode"] {
      list-style-image: get-var("devices-icon") !important;
    }

    // Eyedropper icon
    .subviewbutton[label="Eyedropper"] {
      list-style-image: get-var("eyedropper-icon") !important;
    }

    // Page Source icon
    .subviewbutton[key="key_viewSource"] {
      list-style-image: get-var("code-icon") !important;
    }

    // Extensions for developers icon
    .subviewbutton[data-l10n-id="appmenu-developer-tools-extensions"] {
      list-style-image: get-var("extension-icon") !important;
    }
  }

  // Get help icon
  #appMenu_menu_openHelp {
    list-style-image: get-var("help-icon") !important;
  }

  // Share ideas and feedback… icon
  #appMenu_feedbackPage {
    list-style-image: get-var("feedback-icon") !important;
  }

  // More troubleshooting information
  #appMenu_helpSafeMode {
    list-style-image: get-var("dev-icon") !important;
  }

  // More troubleshooting information icon
  #appMenu_troubleShooting {
    list-style-image: get-var("info-icon") !important;
  }

  // Report icon
  #appMenu_help_reportSiteIssue,
  #appMenu_menu_HelpPopup_reportPhishingtoolmenu,
  #appMenu_report_broken_site_button {
    list-style-image: get-var("report-icon") !important;
  }

  // Switching to a new device icon
  #appMenu_helpSwitchDevice {
    list-style-image: get-var("devices-icon") !important;
  }

  // About icon
  #appMenu_aboutName {
    list-style-image: get-var("info-icon") !important;
  }

  // Manage extensions icon
  #unified-extensions-manage-extensions {
    list-style-image: get-var("settings-icon") !important;
  }

  // extensions menu icon
  .unified-extensions-item-menu-button {
    list-style-image: get-var("menu-icon") !important;
  }

  // Reopen all tabs icon
  #appMenu-library-recentlyClosedTabs>.restoreallitem {
    list-style-image: get-var("open-in-icon") !important;
  }

  // Reopen all windows
  #appMenu-library-recentlyClosedWindows>.restoreallitem {
    list-style-image: get-var("open-in-icon") !important;
  }

  // Restore previous session
  #appMenu-restoreSession {
    list-style-image: get-var("open-in-icon") !important;
  }

  // Clear cookies and site data… icon
  #identity-popup-clear-sitedata-button {
    list-style-image: get-var("trash-icon") !important;
  }

  // More information icon
  #identity-popup-more-info {
    list-style-image: get-var("info-icon") !important;
  }

  // Close duplicate tabs
  #allTabsMenu-closeDuplicateTabs {
    list-style-image: get-var("new-tab-icon") !important;
  }
}

// fix fill color
#allTabsMenu-containerTabsButton,
#allTabsMenu-searchTabs,
#panelMenu_showAllBookmarks,
#PanelUI-historyMore,
#appmenu-developer-tools-view>.subviewbutton,
#unified-extensions-manage-extensions,
#identity-popup-more-info,
#identity-popup-clear-sitedata-button,
#appMenu-library-recentlyClosedWindows>.restoreallitem,
#appMenu-library-recentlyClosedTabs>.restoreallitem {
  -moz-context-properties: fill !important;

  &>.toolbarbutton-icon {
    -moz-context-properties: fill !important;
    fill: get-var("icon-color-primary") !important;
  }
}