@include moz-pref-media("userChrome.ui-context-menu-icons") {
  #context-back {
    --menuitem-image: #{get-var("arrow-back-icon")};
  }

  #context-forward {
    --menuitem-image: #{get-var("arrow-forward-icon")};
  }

  #context-reload,
  #context_reloadTab {
    --menuitem-image: #{get-var("refresh-icon")};
  }

  #context-reload {
    background-size: 20px !important;
    background-position-x: 18px !important;
  }

  #context-stop {
    --menuitem-image: #{get-var("close-icon")};
  }

  #context_openANewTab {
    --menuitem-image: #{get-var("new-tab-icon")};
  }

  // open link in new tab
  #context-openlinkintab {
    --menuitem-image: #{get-var("open-in-icon")};
  }

  #context_bookmarkTab {
    --menuitem-image: #{get-var("star-icon")};
    -moz-context-properties: fill, fill-opacity !important;
    fill-opacity: 0 !important;
  }

  #context-savepage {
    --menuitem-image: #{get-var("file-save-icon")};
  }

  #context_selectAllTabs,
  [data-l10n-id="text-action-select-all"],
  #context-selectall {
    --menuitem-image: #{get-var("select-all-icon")};
  }

  #context-video-saveimage,
  #context-take-screenshot {
    --menuitem-image: #{get-var("screenshot-icon")};
  }

  #context-viewsource {
    --menuitem-image: #{get-var("code-icon")};
  }

  #context-inspect {
    --menuitem-image: #{get-var("toolbar-icon")};
  }

  #context_closeTab,
  #context_closeTabOptions {
    --menuitem-image: #{get-var("close-icon")};
  }

  // close duplicate tabs
  #context_closeDuplicateTabs {
    --menuitem-image: #{get-var("tab-close-icon")};
  }

  #context_undoCloseTab {
    --menuitem-image: #{get-var("reply-icon")};
  }

  #context-openlinkinusercontext-menu,
  [id="placesContext_open:newcontainertab"],
  #context_reopenInContainer {
    --menuitem-image: #{get-var("multiaccountcontainer-icon")};
  }

  [id="placesContext_open:newtab"] {
    --menuitem-image: #{get-var("new-tab-icon")};
  }

  #context-openlink,
  [id="placesContext_open:newwindow"] {
    --menuitem-image: #{get-var("new-window-icon")};
  }

  #context-openlinkprivate,
  [id="placesContext_open:newprivatewindow"] {
    --menuitem-image: #{get-var("incognito-icon")};
  }

  #context_toggleMuteTab:not([muted="true"]) {
    --menuitem-image: #{get-var("audio-muted-icon")};
  }

  #context_toggleMuteTab[muted="true"] {
    --menuitem-image: #{get-var("audio-icon")};
  }

  #context_pinTab {
    --menuitem-image: #{get-var("pin-icon")};
  }

  #context_unpinTab {
    --menuitem-image: #{get-var("unpin-icon")};
  }

  // move tab
  #context_moveTabOptions {
    --menuitem-image: #{get-var("swap-icon")};
  }

  #context_openTabInWindow {
    --menuitem-image: #{get-var("new-window-icon")};
  }

  #context_moveToStart {
    --menuitem-image: #{get-var("arrow-back-icon")};
  }

  #context_moveToEnd {
    --menuitem-image: #{get-var("arrow-forward-icon")};
  }

  [dir="rtl"] {
    #context_moveToStart {
      --menuitem-image: #{get-var("arrow-forward-icon")};
    }

    #context_moveToEnd {
      --menuitem-image: #{get-var("arrow-back-icon")};
    }
  }

  // --------------------------
  // Text context menu
  [data-l10n-id="text-action-undo"],
  #context-undo {
    --menuitem-image: #{get-var("undo-icon")};
  }

  [data-l10n-id="text-action-redo"],
  #context-redo {
    --menuitem-image: #{get-var("redo-icon")};
  }

  #placesContext_cut,
  [data-l10n-id="text-action-cut"],
  #context-cut {
    --menuitem-image: #{get-var("cut-icon")};
  }

  #placesContext_copy,
  [data-l10n-id="text-action-copy"],
  #context-copy {
    --menuitem-image: #{get-var("copy-icon")};
  }

  #placesContext_paste_group,
  [data-l10n-id="text-action-paste"],
  #context-paste {
    --menuitem-image: #{get-var("paste-icon")};
  }

  #placesContext_deleteFolder,
  #placesContext_deleteBookmark,
  [data-l10n-id="text-action-delete"],
  #context-delete {
    --menuitem-image: #{get-var("trash-icon")};
  }

  // Edit bookmark
  [id="placesContext_show_folder:info"],
  [id="placesContext_show_bookmark:info"] {
    --menuitem-image: #{get-var("edit-icon")};
  }

  // copy link
  #context-copylink {
    --menuitem-image: #{get-var("link-icon")};
  }

  // copy link without site tracking
  #context-stripOnShareLink {
    --menuitem-image: #{get-var("link-off-icon")};
  }

  // save link
  #context-savelink {
    --menuitem-image: #{get-var("file-save-icon")};
  }

  // share tab
  [data-l10n-id="tab-context-share-url"] {
    --menuitem-image: #{get-var("share-icon")};
  }

  // --------------------------
  // Image context menu

  // Open Image in New Tab
  #context-viewimage {
    --menuitem-image: #{get-var("open-in-icon")};
  }

  // Copy Image
  #context-copyimage-contents {
    --menuitem-image: #{get-var("copy-icon")};
  }

  // Copy Image Link
  #context-copyimage {
    --menuitem-image: #{get-var("link-icon")};
  }

  // View Image Info
  #context-viewimageinfo {
    --menuitem-image: #{get-var("help-icon")};
  }

  // close tabs left
  #context_closeTabsToTheStart {
    --menuitem-image: #{get-var("arrow-back-icon")};
  }

  // close tabs right
  #context_closeTabsToTheEnd {
    --menuitem-image: #{get-var("arrow-forward-icon")};
  }

  [dir="rtl"] {

    // close tabs left
    #context_closeTabsToTheStart {
      --menuitem-image: #{get-var("arrow-forward-icon")};
    }

    // close tabs right
    #context_closeTabsToTheEnd {
      --menuitem-image: #{get-var("arrow-back-icon")};
    }
  }

  // duplicate tab
  #context_duplicateTab {
    --menuitem-image: #{get-var("tab-duplicate-icon")};
  }

  // --------------------------
  // Video context menu

  // Play
  // #context-media-play {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Mute
  // #context-media-mute {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Speed
  // #context-media-playbackrate {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Loop
  // #context-media-loop {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Full Screen
  // #context-video-fullscreen {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Hide Controls
  // #context-media-hidecontrols {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // // Watch in Picture-in-Picture
  // #context-video-pictureinpicture {
  //   --menuitem-image: #{get-var("help-icon")};
  // }

  // Save Video As…
  #context-savevideo,
  #context-saveimage {
    --menuitem-image: #{get-var("file-save-icon")};
  }

  // Copy Video Link
  #context-copyvideourl {
    --menuitem-image: #{get-var("copy-icon")};
  }

  // Allowing set icons as background
  .textbox-contextmenu,
  #contentAreaContextMenu,
  #toolbar-context-menu,
  :is(#placesContext, #tabContextMenu) {

    :is(menuitem, menu):not([image],
      .menu-iconic,
      .menuitem-iconic,
      [type="radio"],
      [type="checkbox"],
      [checked]),
    #context-back,
    #context-forward,
    #context-reload,
    #context-stop,
    #context-bookmarkpage {
      -moz-context-properties: fill, fill-opacity, stroke !important;
      fill: currentColor !important;
      stroke: currentColor;
      background-size: 16px !important;
      background-repeat: no-repeat !important;
      background-image: var(--menuitem-image) !important;

      background-position: left center !important;
      background-position-x: 12px !important;

      @media (-moz-platform: linux) {
        background-position-x: 6px !important;
      }
    }
  }

  [dir="rtl"] {

    // Allowing set icons as background
    .textbox-contextmenu,
    #contentAreaContextMenu,
    #toolbar-context-menu,
    :is(#placesContext, #tabContextMenu) {

      :is(menuitem, menu):not([image],
        .menu-iconic,
        .menuitem-iconic,
        [type="radio"],
        [type="checkbox"],
        [checked]) {
        background-position: left center !important;
        background-position-x: calc(100% - 12px) !important;

        @media (-moz-platform: linux) {
          background-position-x: calc(100% - 6px) !important;
        }
      }
    }
  }
}