tab-stack colored, without icon/logo image and size set to auto fit content

[Teamofwinter]

div#tabs-container div.is-substack > div {
    background-color: rgba(255, 0, 0, 0.209); /*changes tabstack color*/
}

 
div#tabs-container div.is-substack span.favicon.jstest-favicon-image{
    display: none;  /* removes tabstack icon/logo pic */
}

div#tabs-container div.tab-position.is-substack{
    width: fit-content;
    min-width: fit-content;
}

.tab-audio{
    pointer-events: none;
}

what I was going for is the chrome grouped tabs style because when it comes to the two levels tab stack, it is tough to differentiate between tab stacks and single tabs which is why I added a color to them and obviously the icon or logo is useless in a tabstack and takes up a lot of space, lastly the size needs to only fit the name of the tab stack
only problem is, it requires a bit of js to fix the positioning for the rest of the tabs and when there's a lot of tabs the size of the tab stack shrinks and hides half or more the name of the tab stack (Edit: probably because of the tab positioning as well) and this is not what I want, I want the entire text visible while still maintaining the 22 character limit