@use '../../../styles';
@use '../../../themes/defaults';

.jse-context-menu-pointer {
  position: absolute;
  top: calc(-0.5 * defaults.$context-menu-pointer-size);
  right: calc(-0.5 * defaults.$context-menu-pointer-size);
  width: defaults.$context-menu-pointer-size;
  height: defaults.$context-menu-pointer-size;
  padding: 0;
  margin: 0;

  cursor: pointer;
  background: transparent;

  border-radius: 2px;
  background: defaults.$context-menu-pointer-hover-background;
  color: defaults.$context-menu-pointer-color;
  border: none;
  box-shadow: defaults.$controls-box-shadow;

  &.jse-root {
    top: 0;
    right: calc(-2px - defaults.$context-menu-pointer-size);
  }

  &.jse-insert {
    right: -1px;
  }

  &:hover {
    background: defaults.$context-menu-pointer-background-highlight;
  }

  &.jse-selected {
    background: defaults.$context-menu-pointer-background;

    &:hover {
      background: defaults.$context-menu-pointer-background-highlight;
    }
  }
}