Dashed indent guides incosistent with tab level

[Pedro Sader Azevedo]

Describe the bug
The dashed indent guides are the same for differently indented tabs, i.e. tabs on different "levels".

To Reproduce
Steps to reproduce the behavior:

1. Select one of Flying Fox's custom css configurations for Tree Style Tabs. I checked this behavior happens on both custom.css and custom-hover.css.
2. Open a link in a new tab, so that you have one level of indentation.
3. On that new tab, open another link in another new tab. You should now have two levels of indentation.
4. Notice how both show a dashed line at the same level, which is a bit confusing.

Screenshots

Firefox Version
91.0

Additional Information
I tried tweaking the css a little bit, but I'm not much of an expert 😅. I have a hunch that using the data-level variable to set the margin-left field of tab-item might solve this.

In any case, here's the best pseudo-css I could come up with:

tab-item:not([data-level="0"]):not(.pinned) {
    ...
    margin-left: calc(data-level * 7px);
    ...
}

And, of course, thanks for developing FlyingFox! It made my productivity skyrocket on my many online classes 🚀