@use 'sass:math';

@import 'variables';

@mixin context-menu {
  .react-contextmenu {
    min-width: 160px;
    padding: math.div($ui-margin, 2) 0;
    margin: 2px 0 0;
    font-size: 16px;
    text-align: left;
    background-color: $dark-row-color;
    background-clip: padding-box;
    border: 1px solid $border-color;
    border-radius: 0.25rem;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease !important;
    z-index: 3;

    &.react-contextmenu--visible {
      opacity: 1;
      pointer-events: auto;
    }

    .react-contextmenu-item {
      padding: math.div($ui-margin, 2) $ui-margin;
      font-weight: 400;
      text-align: inherit;
      white-space: nowrap;
      background: 0 0;
      border: 0;
      cursor: pointer;
    }

    .react-contextmenu-item--divider {
      margin-bottom: math.div($ui-margin, 2);
      padding: math.div($ui-margin, 2) 0 0 0;
      border-bottom: 1px solid $border-color;
      cursor: inherit;
    }

    .react-contextmenu-item--selected {
      background: $selected-row-color;
    }
  }
}