/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

*|*:root {
  --menu-icon-opacity: 1;
  --menu-arrow-width: 1em;

  @media (-moz-platform: windows) {
    --menu-arrow-width: max(1em, 16px);

    @media (prefers-color-scheme: light) {
      --menu-icon-opacity: 0.7;
    }
  }
}

/* Menu separator */

menuseparator {
  /* Using padding instead of margin to increase the hit area, as some
     separators (e.g. in bookmarks menus) can be dragged or have a context
     menu. */
  padding-block: 4px;

  @media (-moz-platform: macos) {
    padding-block: 5px;
    margin-inline: 9px;
  }
}

menuseparator::before {
  border-top: 1px solid var(--panel-separator-color);
  content: "";
  display: block;
  flex: 1;
}

/* Accel text */

@media not (prefers-contrast) {
  menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
    color: var(--panel-disabled-color);
  }
}

/* Scroll buttons */

/* Hide arrow buttons when there's nothing to scroll in that direction */
.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
  display: none;
}

/* Prevent the scrolled contents of the menupopup from jumping vertically when
 * the arrow buttons appear / disappear, by positioning ::part(scrollbox) in
 * such a way that its edges are at the same position as the edges of
 * arrowscrollbox regardless of scroll button visibility.
 */
.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) {
  /* scrollbutton-up is visible; shift our top edge up by its height. */
  margin-top: -16px;
}

.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) {
  /* scrollbutton-down is visible; shift our bottom edge down by its height. */
  margin-bottom: -16px;
}

.menupopup-arrowscrollbox::part(scrollbox-clip) {
  /* In the space where the arrow buttons overlap the scrollbox, clip away the
   * scrollbox so that nothing is shown behind the arrow button even if the
   * button is transparent.
   */
  overflow: clip;
}

@media (-moz-platform: windows) or (-moz-platform: linux) {
  menupopup,
  menubar {
    font: menu;
  }
}

@media (-moz-platform: macos) {
  menupopup {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font: -moz-pull-down-menu;
  }
}

menu,
menuitem,
menucaption {
  border-radius: calc(var(--panel-border-radius) / 2);
  align-items: center;
  flex-shrink: 0;
  list-style-image: none;
  max-width: 42em;

  @media (-moz-platform: linux) {
    padding: 4px 6px;
  }

  @media (-moz-platform: macos) {
    padding: 3px 9px;
  }
}

menu,
menuitem {
  &:where([disabled="true"]) {
    color: var(--panel-disabled-color);
    text-shadow: none;
  }

  &:where([_moz-menuactive]:not([disabled="true"])) {
    color: -moz-menuhovertext;
    background-color: -moz-menuhover;
  }

  &:where([_moz-menuactive="true"][disabled="true"]) {
    background-color: -moz-menuhoverdisabled;
  }
}

menuitem:is([default="true"], .spell-suggestion),
menucaption {
  font-weight: bold;
}

/* ..... menu arrow box ..... */

.menu-right {
  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--menu-icon-opacity);

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

  > image {
    width: var(--menu-arrow-width);
  }

  @media (-moz-platform: linux) {
    margin-block: 0;
    margin-inline: 6px 0;
  }

  @media (-moz-platform: macos) {
    margin-inline: 22px -3px;
  }

  @media (-moz-platform: windows) {
    margin-inline-end: 1em;
  }
}

@media (-moz-platform: macos) {
  :is(.menu-accel, .menu-iconic-accel)[value] {
    margin-inline-start: 25px;
  }
}