pos-mention-menu {
  /* make sure the suggestions do not go behind the editors header toolbar */
  z-index: var(--layer-2);
}

ul[role='listbox'] {
  list-style: none;
  margin: 0;
  padding: var(--size-1);
  background: var(--pos-background-color);
  border: 1px solid var(--pos-border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

li[role='option'] {
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-sm);
  cursor: pointer;

  &[aria-selected='true'],
  &:hover {
    background-color: color-mix(in srgb, var(--pos-primary-highlight-color) 20%, transparent);
    color: var(--pos-primary-color);
  }

  &.new-thing {
    &[aria-selected='true'],
    &:hover {
      background-color: var(--pos-success-background-color);
      color: var(--pos-success-text-color);
      font-weight: var(--weight-bold);
    }
  }
}

@media (max-width: 640px) {

  /*
   On mobile the auto-position from tiptap is still being used, but we override
   some of the inline styles here with !important, to get a full-width menu
   that is still positioned next to the cursor by original tiptap positioning
   */
  pos-mention-menu {
    left: 0 !important;
    right: 0;
    width: auto !important;
  }

  ul[role='listbox'] {
    /* keep long suggestion lists scrollable instead of overflowing the screen */
    max-height: min(var(--size-80), 50vh);
    overflow-y: auto;
    /* Larger options that are easier to tap */
    li[role='option'] {
      padding: var(--size-2) var(--size-3);
      min-height: var(--size-9);
      display: flex;
      align-items: center;
    }
  }
}