:root{
  --contexify-zIndex: 666;
  --contexify-menu-minWidth: 220px;
  --contexify-menu-padding: 6px;
  --contexify-menu-radius: 6px;
  --contexify-menu-bgColor: #fff;
  --contexify-menu-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1),
  2px 4px 4px rgba(0, 0, 0, 0.1),
  3px 6px 6px rgba(0, 0, 0, 0.1);
  --contexify-menu-negatePadding: var(--contexify-menu-padding);

  --contexify-separator-color: rgba(0, 0, 0, 0.2);
  --contexify-separator-margin: 5px;
  --contexify-itemContent-padding: 6px;
  --contexify-activeItem-radius: 4px;
  --contexify-item-color: #333;
  --contexify-activeItem-color: #fff;
  --contexify-activeItem-bgColor: #3498db;
  --contexify-rightSlot-color: #6f6e77;
  --contexify-activeRightSlot-color: #fff;
  --contexify-arrow-color: #6f6e77;
  --contexify-activeArrow-color: #fff;
}


@mixin focus-swag {
  color: white;
  background-color: rgba( var(--main-bm-color), 1 );
  border-radius: var(--contexify-activeItem-radius);
}

@function negateMenuPadding() {
  @return calc(-1 * var(--contexify-menu-negatePadding));
}

// triggered when user select item from the context menu
@keyframes contexify_feedback {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}


.contexify {
  position: fixed;
  opacity: 0;
  background-color: rgba(var(--bm-bg-color), 1);
  border: 1px solid rgba(var(--bm-border-color), 1);
  color: rgba(var(--bm-text-color), 1 );
  box-sizing: border-box;
  //box-shadow:var(--contexify-menu-shadow);
  border-radius: var(--contexify-menu-radius);
  padding: var(--contexify-menu-padding);
  min-width: var(--contexify-menu-minWidth);
  z-index: var(--contexify-zIndex);

  -user-select: none;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */

  &_submenu-isOpen,
  &_submenu-isOpen > &_itemContent {
    @include focus-swag;
  }

  // target submenu arrow
  &_submenu-isOpen > &_itemContent &_rightSlot {
    color: var(--contexify-activeArrow-color)
  }


  &_submenu-isOpen > &_submenu {
    pointer-events: initial;
    opacity: 1;
  }

  & &_submenu {
    position: absolute;
    pointer-events: none;
    transition: opacity .265s;

    /* Initial submenu position */
    top: negateMenuPadding();
    left: 100%;

    &-bottom{
      bottom: negateMenuPadding();
      top: unset;
    }

    &-right {
      right: 100%;
      left: unset;
    }
  }

  &_rightSlot {
    margin-left: auto;
    display: flex;
    color: var(--contexify-rightSlot-color)
  }

  &_separator {
    height: 1px;
    cursor: default;
    margin: var(--contexify-separator-margin);
    background-color: var(--contexify-separator-color);
  }

  &_willLeave-disabled {
    pointer-events: none;
  }

  &_item {
    cursor: pointer;
    position: relative;

    &:focus{
      outline: 0;
    }

    &:not(&-disabled):hover > .contexify_itemContent .contexify_rightSlot,
    &:focus .contexify_rightSlot{
      color: var(--contexify-activeRightSlot-color);
    }

    &:not(&-disabled)[aria-haspopup] > .contexify_itemContent .contexify_rightSlot {
      color: var(--contexify-arrow-color);
    }

    // triggered by keyboard navigation
    &[aria-haspopup]:focus  > .contexify_itemContent .contexify_rightSlot,
    &:not(&-disabled)[aria-haspopup].contexify_submenu-isOpen  > .contexify_itemContent .contexify_rightSlot,

    &:not(&-disabled)[aria-haspopup]:hover > .contexify_itemContent .contexify_rightSlot  {
      color: var(--contexify-activeArrow-color);
    }

    &:not(&-disabled):hover > &Content,
    &:not(&-disabled):focus > &Content {
      @include focus-swag;
    }

    &:not(&-disabled):hover > .contexify_submenu {
      pointer-events: initial;
      opacity: 1;
    }

    &-disabled {
      cursor: default;
      opacity: .5;
    }
    &Content {
      padding: 3px 6px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      color: rgba(var(--bm-text-color), 1 );
      position: relative;
      font-size: 14px;
      line-height: 28px;
    }

    &-feedback{
      animation: contexify_feedback 0.12s both;
    }
  }
}