/* 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/. */

/* Most of the CSS logic to be able to add icons is part of the more generic
 * file ContextMenu.css that is applied for all context menus. Especially the
 * CSS class `react-contextmenu-icon` is used in addition to these more specific
 * classes, and that's where other properties for backgrounds are specified.
 */

/* All the icons we use in the call node's context menu are nicer if we use this
 * filter when in the selected state. */
.callNodeContextMenu .react-contextmenu-item--selected .react-contextmenu-icon,
.callNodeContextMenu .react-contextmenu-item:hover .react-contextmenu-icon {
  filter: invert(1);
}

.callNodeContextMenuIconMerge {
  background-image: url(../../../res/img/svg/merge-icon.svg);
}

.callNodeContextMenuIconCollapse {
  background-image: url(../../../res/img/svg/collapse-icon.svg);
}

.callNodeContextMenuIconFocus {
  background-image: url(../../../res/img/svg/focus-icon.svg);
}

.callNodeContextMenuIconDrop {
  background-image: url(../../../res/img/svg/drop-icon.svg);
}

.callNodeContextMenuShortcut {
  padding: 0 5px;
  border-radius: 3px;

  /* This color is based off of photon grey, but adjusted to have a nice visual look
     when hovering. */
  background: #dedee3c9;
  box-shadow: 1px 1px #0004;

  /* Override the hover color. */
  color: #000;
  margin-inline-start: 12px;
}

@media (forced-colors: active) {
  .callNodeContextMenuShortcut {
    background: SelectedItemText;
    color: SelectedItem;
    outline: 1px solid CanvasText;
  }
}
