.context-menu {
  @apply py-1 px-0 w-max min-w-[144px] bg-k-bg-context-menu fixed rounded-md z-[1001] shadow-md;

  .arrow {
    @apply bg-k-bg-context-menu absolute w-[8px] aspect-square rotate-45;
  }

  li {
    @apply relative px-4 py-1.5 whitespace-nowrap hover:bg-k-highlight hover:text-k-text-primary;

    &.separator {
      @apply pointer-events-none p-0 border-b border-b-white/10;
    }

    &.has-sub {
      @apply pr-[30px] bg-no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 30' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cpolygon points='-2.303673 -19.980561 12.696327 5.999439 -17.303673 5.999439 -2.303673 -19.980561' transform='matrix(0 1-1 0 5.999439 17.303673)' fill='%23fff' stroke-width='0'/%3E%3C/svg%3E");
      background-position: right 8px center;
      background-size: 10px;
    }
  }

  .submenu {
    @apply absolute top-0 left-full hidden;
  }
}