/*
 * Automate 2 level tab stacks
 * Forum link: https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3
 */

/* Automate 2 level vertical tabbar columns */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {
    z-index: 1;
    transition: background-color .15s, flex-basis .12s ease-out .05s !important;
}
/* active main column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {
    flex-basis: 30px !important;
    z-index: 0;
} 
/* active sub column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {
    flex-basis: calc(100% - 64px) !important;
    z-index: 3;
} 
/* active sub column with small width tabbar */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {
    flex-basis: calc(100% - 30px) !important;
    z-index: 3;
} 

/* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;}

/* fix small tab hover effect for title, stack counter, & close button */
#tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;}
#tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;}
#browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter, 
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;}

/* autohide inactive columns' scrollbar */
#tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {
    overflow-y: hidden;
}

/* optional: hide tabbar columns' resizer */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container .SlideBar--FullHeight {visibility: hidden;}

/* option 2: Minimized main column to favicon + stack counter */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: calc(100% - 64px) !important;}