//-- Variables -----------------------------------------------------------------
// Items
// .menu-iconic, .menuitem-iconic: Already exist, not target.
// .in-menulist: Not a range because it is a select menu of web content.
// [checked="true"]: There should be a check mark instead of an icon.
$_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
$_checkMenu: ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])";

// Components
$_nestedPopup: "> menupopup:not(.in-menulist) >";
$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) #{$_nestedPopup}";
$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) #{$_nestedPopup}";
$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, #usercssloader-menupopup, #sidebar-context-menu)";

$_nestedPopupIconMenus: selector.nest(
  $_nestedPopupIcon,
  "#{$_iconMenuitem}, #{$_iconMenu}"
);
$_nestedPopupPaddingMenus: selector.nest(
  $_nestedPopupPadding,
  "#{$_iconMenuitem}, #{$_iconMenu}"
);
$_iconMenuPopupMenus: selector.nest(
  $_iconMenuPopup,
  "#{$_iconMenuitem}, #{$_iconMenu}"
);

$_globalMenus: "#main-menubar > menu";
$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}";
$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}";
$_sendTabMenuPopup: "#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup";
$_otherPopupMenuitem: "menupopup:is(#{$_sendTabMenuPopup}, #frame > menupopup, #spell-dictionaries-menu, #context-ask-chat > menupopup) > menuitem#{$_checkMenu}";
$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar, #sidebarMenu-popup:is(menupopup)";

//-- Mixin ---------------------------------------------------------------------
// Init Menu
$_initialMenus: selector.append(
  "menupopup menuitem, menupopup menu",
  $_checkMenu
);
$_initialMenus: $_initialMenus + "," +
                selector.nest($_initialMenus, "> .menu-iconic-left > .menu-iconic-icon, > .menu-icon");
@mixin _initial_menus() {
  -moz-appearance: none !important; /* Linux: menulist */
}

// Icon
@mixin _layout_icon_menus() {
  /* Color */
  -moz-context-properties: fill, fill-opacity, stroke !important;
  fill: currentColor !important;
  stroke: currentColor;

  /* Layout */
  background-size: 16px !important;
  background-repeat: no-repeat !important;
  background-image: var(--menuitem-image);
}

@mixin _layout_icon_native_menus() {
  @include NativeToolkitMenu {
    list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
  }
}

// Padding
@mixin _layout_root_padding() {
  :root {
    --uc-menu-background-position: left;
    --context-menu-background-padding-default: 5px;
    --context-menu-background-padding: var(--context-menu-background-padding-default);
    &:-moz-locale-dir(rtl) {
      --uc-menu-background-position: right;
    }
  }
}
@mixin _layout_init_padding() {
  background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
  padding-inline-start: var(--context-menu-background-padding) !important;
}

@mixin _layout_root_non_native() {
  :root {
    --context-menu-background-padding: 1em;
    --context-menu-text-padding-default: #{ 16px + 8px };
    --context-menu-text-padding: var(--context-menu-text-padding-default);
    --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));

    --bookmark-menu-icon-align-padding: 0px;
  }
}

@mixin _layout_init_non_native() {
  padding-inline-start: var(--menu-background-padding-default) !important;
  margin-left: 0 !important;
}

@mixin _layout_win_native_menu_popup() {
  @include NativeMenuPopup {
    .menu-iconic,
    .menuitem-iconic {
      > .menu-iconic-left {
        appearance: none !important;
        padding-block: 0 !important;
        padding-inline-start: 5px !important;
        margin-inline-end: 8px !important;
        @include Option("userChrome.compatibility.os.win11") {
          box-sizing: content-box;
        }
      }
    }
    .menu-accel, .menu-iconic-accel {
      box-sizing: content-box;
      min-height: 16px;
    }
    .menu-accel, .menu-iconic-accel,
    .menu-text, .menu-iconic-text {
      padding-block: 0 !important;
    }
  }
}

@mixin _layout_root_win() {
  @include OS($win) {
    :root {
      --bookmark-menu-icon-text-padding: calc(var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline));
      --bookmark-menu-icon-background-padding: calc(var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding));
    }

    @include WinNativeMenu() {
      :root {
        --context-menu-text-padding: calc(1.45em + 8px);
        --bookmark-menu-icon-align-padding: calc((1.45em - 16px) / 2 + 1px);

        @include OS($win7) {
          --context-menu-background-padding-default: 2px;
          @media (-moz-windows-classic) {
            --context-menu-background-padding-default: -0.5px;
          }
        }
        @include OS($win8) {
          --context-menu-background-padding-default: 3px;
        }
      }

      @include OS($win10) {
        :root {
          --context-menu-background-padding: 3px;
          --menu-background-padding-default: 0px;
        }

        @include Option("userChrome.compatibility.os.win11") {
          :root {
            --context-menu-background-padding: 5px;
          }
          #main-menubar {
            --context-menu-background-padding: calc(5px + ((1.45em - 16px) / 2));
          }
          menuitem {
            &:is([type="checkbox"], [type="radio"]) {
              --menu-padding: 0px;
            }
            &[checked="true"] {
              --context-menu-background-padding: 0px;
              > .menu-iconic-left {
                transform: translateX(2px);
              }
            }
          }
        }

        @include _layout_win_native_menu_popup();
      }
    }
  }
}

@mixin _layout_init_win() {
  @include WinNativeMenu() {
    background-position: left var(--context-menu-background-padding) center !important;
    padding-inline-start: 0 !important;
  }
}

@mixin _layout_root_linux() {
  :root {
    --context-menu-background-padding-default: 6px;

    // https://github.com/mozilla/gecko-dev/commit/e54707888510dec75db59a170b287d1db031505a
    // https://github.com/mozilla/gecko-dev/blob/e54707888510dec75db59a170b287d1db031505a/toolkit/themes/linux/global/menu.css#L103
    --context-menu-text-padding: 21px;
  }
  .menu-icon {
    display: unset !important;
  }
  #main-menubar > menu > .menu-icon {
    display: none !important;
  }
}
@mixin _layout_init_linux() {
  padding-inline-start: 3px;
}

@mixin _layout_root_mac() {
  :root {
    --context-menu-background-padding-default: 10px;
    --context-menu-mac-padding: 21px;
  }
}
@mixin _layout_init_mac_width() {
  padding-inline-end: var(--context-menu-background-padding) !important;
}
@mixin _layout_init_mac_text() {
  padding-inline-start: var(--context-menu-mac-padding) !important;
}
@mixin _layout_init_mac_others() {
  padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
}

// Checkbox
// @include OS($win) {
//   /* Checkbox */
//   :root {
//     --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
//   }
//   :not(menu, #ContentSelectDropdown, #context-navigation)
//     > menupopup
//     > menuitem[type="checkbox"]:not([checked="true"])
//     > .menu-iconic-left {
//     padding-inline-start: var(--context-menu-text-padding);
//   }
// }
