@require "../../stylus/index.styl";

.oui-menu {
  --menu-bg: var(--n0-50); // ButtonFace;
  --menu-border: 1px solid var(--n0-300); // ButtonShadow;
  --menu-radius: px(4);
  --item-fg: var(--n0-950); // ButtonText;
  --item-bg: none;
  --item-hover-fg: var(--fg, HighlightText);
  --item-hover-bg: var(--p1-200, Highlight);
  // --item-active-color: black;
  // --item-active-background: white;
  --item-separator: var(--n0-300);

  .dark & {
    --menu-bg: var(--n0-900); // ButtonFace;
    --menu-border: 1px solid var(--n0-600); // ButtonShadow;
    --menu-radius: px(4);
    --item-fg: var(--fg);
    --item-bg: none;
    --item-hover-fg: var(--fg);
    --item-hover-bg: var(--p1-800);
    --item-separator: var(--n0-600);
  }

  use: stack-y;
  cursor: default;
  max-width: 20rem;
  min-width: 10rem;
  padding: px(4) px(4);
  background: var(--menu-bg);
  border: var(--menu-border);
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow, -box-shadow-md);
  list-style: none;
  z-index: -z-index-popover;
  font-family: inherit;
  font-size: 10pt;
  font-weight: 500;
  user-select: none;

  ._menu_item {
    color: var(--item-fg);
    background: var(--item-bg);
    list-style: none;
    border-radius: px(2);
    white-space: nowrap;
    position: relative;
    display: flex;
    padding: px(4) px(8);

    &:hover {
      color: var(--item-hover-fg);
      background: var(--item-hover-bg);
    }

    &._menu__active, &:active {
      color: var(--item-hover-fg);
      background: var(--item-hover-bg);
    }
  }

  ._menu_disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  ._menu_checked_possible, ._menu_checked {
    padding-left: 28;
  }

  ._menu_checked {
    &:before {
      position: absolute;
      left: 8;
      content: "✔︎";
    }
  }

  ._menu_separator {
    display: flex;
    height: px(1);
    max-height: px(1);
    min-height: 1px;
    border: none;
    padding: 0;
    margin-top: px(4);
    margin-bottom: px(4);
    background: var(--item-separator);
  }
}