// Non Native
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/browser/themes/windows/browser.css#L481
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/global.css#L20
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/menu.css#L30
@include OS($linux) {
  //-- Global ------------------------------------------------------------------
  :root {
    /* Override some menu color variables for light browser themes. */
    --menu-icon-opacity: 0.7;
    --nested-margin: -10px;
    --windows-panel-box-shadow: 0 0 4px hsla(0,0%,0%,.2);

    --menu-checkbox-padding: 12px;
    @include Dark {
      /* Override the menu color variables for dark browser themes. */
      --menu-icon-opacity: 1;
    }
  }

  //-- Global - Menu -----------------------------------------------------------
  /* For Windows 10, prevent using native OS drawing of certain menu elements,
     especially background colors and shadows. */
  menu, menuitem, menucaption {
    appearance: none !important;
  }

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

  /* Menu item text also needs native drawing disabled. */
  menu > .menu-text,
  menuitem > .menu-text,
  menu > .menu-iconic-text,
  menuitem > .menu-iconic-text {
    appearance: none !important;
    margin-inline-start: 0 !important; /* need !important to override the other !important below... */
    padding-inline-end: 0;

    // Align
    &::before {
      box-sizing: border-box !important;
      height: calc(2px + 1.2em) !important;
      padding: 1px 0 !important;
    }
    &[value*="…"]::before {
      padding: 0 !important;
    }
  }

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

  .menu-text {
    padding-inline-start: 0 !important;
  }

  .menu-right {
    appearance: none !important;
    width: unset !important;
    list-style-image: url("chrome://global/skin/icons/arrow-right.svg") !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
    fill-opacity: var(--menu-icon-opacity) !important;
    margin-inline-end: 1px !important;
    padding-top: 0 !important;
  }

  .menu-right > image {
    /* Do not make this smaller than the size of the svg, but upscale for
     * people with large fonts. */
    width: max(1em, 16px) !important;
  }

  .menu-right:-moz-locale-dir(rtl) {
    list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important;
  }

  menulist > menupopup > menuitem {
    padding-inline-end: 1px !important;
  }

  menupopup[needsgutter] menu:not([icon], .menu-iconic),
  menupopup[needsgutter] menuitem:not([type="checkbox"], [type="radio"], [icon], .menuitem-iconic) {
    padding-inline-start: 36px !important;
  }

  /* For Windows 10, checkbox, radio and iconified menuitems need the default
     appearance disabled so they pick up our custom styles instead. */
  .menu-iconic-left,
  menuitem[type="checkbox"],
  menuitem[type="radio"] {
    appearance: none !important; /* to override more specific selectors above. */
    width: unset !important;
    .menu-iconic-icon,
    .menu-icon {
      appearance: none !important;
    }
  }

  .menu-iconic > .menu-iconic-left,
  .menuitem-iconic > .menu-iconic-left {
    padding-inline-end: 0 !important;
    margin-inline-end: 8px !important;
  }

  menuitem[type="checkbox"],
  menuitem[type="radio"] {
    --menu-background-padding-default: var(--menu-checkbox-padding);
  }
  menuitem[checked="true"] {
    padding-inline-start: var(--menu-checkbox-padding) !important;
  }

  menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item .menu-iconic-left {
    padding-inline-end: 0 !important;
    margin-inline-end: 6px !important;
  }

  /* We need to do something to override the default style for selected
     checkboxes and radio buttons because the native drawing we use on other
     Windows versions looks pretty bad with the Win10 styles, so for now we'll
     insert a generic checkmark icon for both types. */
  menuitem[checked="true"] > .menu-iconic-left,
  menuitem[checked="true"] > .menu-icon {
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
    fill-opacity: var(--menu-icon-opacity) !important;
    list-style-image: url("../icons/menu-check.svg") !important;
    width: 16px !important;
    margin-inline-end: 8px !important;
  }
  menuitem[checked="true"] > .menu-iconic-left > .menu-iconic-icon {
    display: initial !important;
  }

  menuseparator {
    appearance: none !important;

    border-top: 1px solid var(--menu-border-color) !important;
    border-bottom: none !important;
    padding: 0 !important;
    /* The side margins should align with the start of the menu item text. */
    margin: 2px 1em !important;

    &::before {
      display: none !important; /* Original: block */
    }
  }

  //-- Global - Menu Popup -----------------------------------------------------
  menupopup {
    /* Disable the default appearance so we can override the native styling. */
    appearance: none !important;

    /* Prevent any background or border around the outside of the shadow. */
    background-color: transparent !important;
    border: none !important;
    /* To account for the box-shadow below */
    margin: -4px !important;
  }

  menupopup:not([placespopup="true"]) > {
    menuitem,
    menu {
      padding-block: var(--menu-padding, 0.5em) !important;
      padding-inline-start: 1em !important;
    }
  }
  .menupopup-arrowscrollbox[part*="content"] {
    box-shadow: var(--windows-panel-box-shadow) !important;
    margin: 4px !important;
    padding: 4px 0 !important;

    color: var(--menu-color) !important;
    background: var(--menu-background-color) !important;
    border-radius: 4px !important;
    @include Option("userChrome.rounding.square_menupopup") {
      border-radius: 0px !important;
    }
    border: 1px solid var(--menu-border-color) !important;

    min-width: 0 !important;
    min-height: 0 !important;
  }
  menupopup > menu > menupopup {
    /* align submenus */
    margin-inline-start: var(--nested-margin) !important;
    margin-top: var(--nested-margin) !important;
  }

  //-- Browser -----------------------------------------------------------------
  #mainPopupSet {
    --menu-background-padding-default: calc( var(--context-menu-background-padding) + var(--context-menu-text-padding-default) );
  }

  /* :not([hidden]) to avoid the display: flex unhiding the item. */
  #context-navigation:not([hidden]) {
    /* The Windows 10 version of the navigation area needs the scrollbox's
       background color, not the builtin "menu" color. */
    background-color: inherit !important;
    /* Match the inner top padding of the menupopup to center the icons visually. */
    padding-bottom: 4px !important;
    /* Use modern flex box so we can use percentage widths to redistribute
     * spacing manually. */
    display: flex !important;
    flex-direction: row !important;
    /* We want the first and last icons to align with the text items which
     * have 1em inline padding, and for icons to be centered within their
     * hover state, so each icon of 16px needs 1em padding on both sides:
     */
    --menuitem-min-width: calc(2em + 16px) !important;
    /* The total width of the container should then be at least 4 times that: */
    min-width: calc(4 * var(--menuitem-min-width)) !important;
  }

  #context-navigation > .menuitem-iconic {
    flex: 1 0 auto !important;
    padding: 0 !important;
  }

  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
    /* We only show hover state on the icons. This ensures there is no
     * dead space between icons, but the visible hover state is only
     * around the icons, and all the icons' hover states match each other.
     */
    background-color: transparent !important;
  }

  #context-navigation > .menuitem-iconic > .menu-iconic-left,
  #context-navigation > .menuitem-iconic > .menu-icon {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* override styles from shared/contextmenu.inc.css */
  #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
  #context-navigation > .menuitem-iconic > .menu-icon {
    width: var(--menuitem-min-width) !important;
    height: 32px !important;
    padding: 8px 1em !important;
    margin: 0 !important;
  }
  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon,
  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-icon {
    background-color: var(--menuitem-hover-background-color) !important; // -moz-menuhover
  }

  #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon,
  #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-icon {
    background-color: transparent !important;// -moz-menuhoverdisabled
  }

  /* If the menu is wider than the icons strictly need, the <menuitem> elements
   * will stretch to pick up the extra space. In that case, the outer icons
   * should align to the start/end of their containing <menuitem>: */
  #context-navigation > .menuitem-iconic:first-child {
    @include BoxPack("start", true);
  }

  #context-navigation > .menuitem-iconic:last-child {
    @include BoxPack("end", true);
  }

  #context-navigation > .menuitem-iconic:last-child,
  #context-navigation > .menuitem-iconic:first-child {
    flex-grow: 0 !important;
    /* The first and last items start off as 16px + 2em, like the other ones.
     * 100% is the width of the parent, which will be at least 4 * the width of
     * an individual item (16px + 2em)
     * So 100% - 4 item widths gets us the remaining available space if
     * #context-navigation is wider than that.
     * Then divide by 6 to get the 1/6 of that extra space, and add this space
     * to the width of the first/last items.
     * This ensures that the 3 visual gaps between the 4 icons are all the same
     * size, with each 1/3 of the available space evenly distributed between
     * the 2 items on either side of the gap.
     */
    width: calc(var(--menuitem-min-width) + calc(100% - 4 * var(--menuitem-min-width)) / 6) !important;
  }

  /* Other menu separators don't extend all the way to the menu edges, but the
     one below the navigation buttons in the content context menu should. */
  #context-sep-navigation {
    margin-top: 0 !important;
    margin-inline: 0 !important;
  }
}

// Not
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/browser/themes/windows/customizableui/panelUI.css#L18
// https://github.com/mozilla/gecko-dev/blob/b77aed8146805795350e7e127869c395ab70efdf/toolkit/themes/windows/global/popup.css#L26
