$menu-min-width: 220px;
$menu-side-paddings: 4px;
// context menu
// @media (-moz-platform: windows),
//   (-moz-platform: linux),
//   (-moz-platform: macos) {
@media (-moz-platform: windows),
(-moz-platform: linux) {

  #context-back,
  #context-forward,
  #context-reload,
  #context-stop,
  #context-bookmarkpage{
    list-style-image: none !important;
  }

  menupopup,
  panel:not(#autoscroller) {
    // menu container min width
    min-width: $menu-min-width !important;

    // menu container border radius
    --panel-border-radius: 12px !important;
    border-radius: var(--panel-border-radius) !important;

    // menu container inner padding
    --panel-padding-block: 8px !important;
    --panel-padding: var(--panel-padding-block) 0 !important;
  }

  // menu items border radius
  menu,
  menuitem,
  menucaption {
    border-radius: 0 !important;
  }

  // context menu background-color & drop shadow
  .menupopup-arrowscrollbox {
    background-color: var(--arrowpanel-background) !important;
    border: none !important;
    // border: 1px solid !important;
    // border-color: get-var("menu-border-color") !important;
    box-shadow: get-var("elevation-2") !important;
  }

  // separator color
  menuseparator::before {
    border-color: get-var("menu-border-color") !important;
    margin-inline-start: $menu-side-paddings !important;
    margin-inline-end: $menu-side-paddings !important;
  }

  menuseparator {
    padding-inline: 0 !important;
  }

  // string style for back/forward/reload/bookmark menu items
  #context-navigation:not([hidden]) {
    min-width: $menu-min-width !important;
    background-color: inherit;
    // padding-bottom: 0.4em !important;
    display: flex !important;
    flex-direction: column !important;

    .menuitem-iconic {
      position: relative !important;

      &::after {
        display: grid;
        place-items: start;
        align-items: center;
        content: attr(aria-label);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    // hide back/forward/reload/bookmark icons
    .menu-iconic-icon {
      visibility: hidden !important;
    }
  }

  // (RTL) string style for back/forward/reload/bookmark menu items
  [dir="rtl"] {
    #context-navigation:not([hidden]) {
      .menuitem-iconic {
        &::after {
          place-items: end;
          align-items: center !important;
          left: unset;
          right: calc(-1 * get-var("menuitem-padding-without-icon")) !important;
        }
      }
    }
  }

  // #context-navigation menu items
  #context-navigation>.menuitem-iconic>.menu-iconic-left>.menu-iconic-icon {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    // padding-block: 0.4em !important;
  }

  // other menu items
  #context-navigation>menuitem,
  menupopup>menu,
  menupopup>menuitem,
  menupopup>menucaption {
    $menu-item-height: 24px;
    min-height: $menu-item-height !important;
    max-height: $menu-item-height !important;
  }
}

// left margin for menu item without icon
$default-padding: 1em;
$image-width: 16px;
$image-padding-end: 8px;

@media (-moz-platform: windows) {

  menupopup {
    @media (-moz-windows-mica-popups) {
        appearance: none !important;
    }
  }

  :root,
  html,
  body {
    --#{$prefix}-menuitem-padding-with-icon: #{$default-padding};
    --#{$prefix}-menuitem-padding-without-icon: calc(#{$default-padding} + #{$image-width} + #{$image-padding-end});
  }

  #contentAreaContextMenu {
    // :is(menuitem, menu):not([type="checkbox"]) {
    //   padding-inline-start: get-var("menuitem-padding-without-icon") !important;
    // }

    :is(menuitem, menu):not([image],
      .menu-iconic,
      .menuitem-iconic,
      [type="checkbox"]) {
      padding-inline-start: get-var("menuitem-padding-without-icon") !important;
    }

    :is(menuitem, menu):is([image], .menu-iconic, .menuitem-iconic) {
      padding-inline-start: get-var("menuitem-padding-with-icon") !important;
    }

    menuitem[checked="true"] {
      padding-inline-start: get-var("menuitem-padding-with-icon") !important;
    }

    menuitem[type="checkbox"]>.menu-iconic-left {
      margin-inline-end: 0 !important;
    }

    menuitem[type="checkbox"]:is([checked="true"])>.menu-iconic-left {
      margin-inline-end: $image-padding-end !important;
    }

    menuitem[checked="true"]>.menu-iconic-left .menu-iconic>.menu-iconic-left,
    .menuitem-iconic>.menu-iconic-left {
      margin-inline-end: $image-padding-end !important;
    }
  }

  #tabContextMenu {
    :is(menuitem, menu):not([image], .menu-iconic, .menuitem-iconic) {
      padding-inline-start: get-var("menuitem-padding-without-icon") !important;
    }
  }

  // string style for back/forward/reload/bookmark menu items
  #context-navigation:not([hidden]) {
    .menuitem-iconic {
      position: relative !important;

      &::after {
        padding-inline-start: get-var("menuitem-padding-without-icon"
          ) !important;
      }
    }
  }

  [dir="rtl"] {

    // string style for back/forward/reload/bookmark menu items
    #context-navigation:not([hidden]) {
      .menuitem-iconic {
        &::after {
          padding-inline-start: unset !important;
          padding-inline-end: get-var("menuitem-padding-with-icon") !important;
        }
      }
    }
  }

  // sub menu arrow icon margin
  .menu-right {
    margin-inline-end: 12px !important;
  }
}

@media (-moz-platform: windows),
(-moz-platform: linux) {

  // menu item hover bg color
  menu,
  menuitem {
    margin-inline-start: $menu-side-paddings !important;
    margin-inline-end: $menu-side-paddings !important;
    border-radius: 4px !important;

    &[disabled="true"] {
      background-color: transparent !important;
      color: get-var("text-disabled") !important;
    }

    // on hover
    &:where([_moz-menuactive="true"]):not([disabled="true"]) {
      color: inherit !important;
    }
  }

  // hide "Bookmark Page/Link.."
  #context-bookmarkpage,
  #context-bookmarklink {
    display: none !important;
  }

  // hide "Save Page/Link to Pocket"
  #context-pocket,
  #context-savelinktopocket {
    display: none !important;
  }

  // hide "Inspect Accessibility Properties"
  #context-inspect-a11y {
    display: none !important;
  }

  // hide "Email Image…"
  #context-sendimage {
    display: none !important;
  }

  // hide "Email Video…"
  #context-sendvideo {
    display: none !important;
  }
}

// fixes for linux
@media (-moz-platform: linux) {
  $menu-item-height: 27px;

  // other menu items
  #context-navigation>.menuitem-iconic>.menu-iconic-left>.menu-iconic-icon,
  menupopup>menu,
  menupopup>menuitem,
  menupopup>menucaption {
    min-height: $menu-item-height !important;
    max-height: $menu-item-height !important;
    // padding: 4px 6px !important;
  }

  #context-navigation> :is(menu, menuitem, menucaption) {
    min-height: $menu-item-height !important;
    max-height: $menu-item-height !important;
  }

  // back/forward/reload buttons left margin
  .menuitem-iconic {
    &::after {
      padding: 0 0 0 27px !important;
    }
  }
}

// fix dropdown menu background color override
arrowscrollbox {
  background-image: none !important;
}

@include moz-pref-media("not userChrome.theme-default") {

  // fix menu item double background color
  menuitem,
  menu {
    background: transparent !important;

    &:hover {
      background: transparent !important;
    }

    &[_moz-menuactive]:is([disabled="true"]) {
      background: transparent !important;
    }

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

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

// main menu
// panelview {
//   min-width: 400px !important;
// }
.subviewbutton {
  margin-inline-start: $menu-side-paddings !important;
  margin-inline-end: $menu-side-paddings !important;
  padding-inline-start: 12px !important;
  padding-inline-end: 12px !important;
  border-radius: 4px !important;

  &[disabled="true"] {
    background-color: transparent !important;
    color: get-var("text-disabled") !important;
  }

  // on hover
  &:where([_moz-menuactive="true"]):not([disabled="true"]) {
    background-color: get-var("menu-border-color") !important;
    color: inherit !important;
  }
}

toolbarseparator {
  margin: 0 !important;
  margin-inline-start: $menu-side-paddings !important;
  margin-inline-end: $menu-side-paddings !important;
}

// compact main menu list items
.toolbar-menupopup :is(menu, menuitem),
.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
  // padding: var(--arrowpanel-menuitem-padding);
  padding: 6px !important;
}