.container {
  position: absolute;
  z-index: 1;
  width: 100%;

  &:has(:global(.ListItem-context-menu)) {
    z-index: 2;
  }
}

.isDragging {
  z-index: 2;

  :global(.drag-item) {
    pointer-events: none;
  }
}

.knob {
  cursor: grab !important;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  width: 2rem;
  height: 2rem;

  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  text-align: center;

  opacity: 0;

  transition: opacity 150ms;

  .container:hover & {
    opacity: 1;
  }

  .isDragging & {
    cursor: grabbing !important;
    opacity: 1;
  }

  @media (pointer: coarse) {
    touch-action: none;
    opacity: 1 !important;
  }
}

.icon {
  font-size: 1.5rem;
}