How do I make custom gutter indicators in for a VsCode extension using it's API?

Question

I've attached below an image with a highlight to where I want to implement a custom line for placing gutter indicators. Similar to how placing down breakpoints works, I want to implement my own system of a gutter indicator that will show a shadow of the indicator when hovered, and can be placed upon a click.

If possible, how can I do it, and links to the documentation would be appreciated!

Gutter-highlight

The decoration type i'm using currently that is set using a keybind.

    const decorationType = vscode.window.createTextEditorDecorationType({
      isWholeLine: true,
      borderWidth: `0 0 0 0`,
      backgroundColor: new vscode.ThemeColor("checkbox.border"),
      gutterIconPath: path.join(__filename, "..", "..", "assets", "pin.png"),
      gutterIconSize: "contain",
      rangeBehavior: vscode.DecorationRangeBehavior.ClosedOpen,
    });
    editor.setDecorations(decorationType, [
      new vscode.Range(editor.selection.active, editor.selection.active),
    ]);