.top-bar {
    border-bottom: var(--border);
    
    & > hr {
        align-self:normal;
    }

    & .tabs-bar {

        & > .tab {
            gap: 0.4em;
            min-width: 0;
            flex: 0 1 12rem;
            max-width: 12rem;
            justify-content: space-between;

            &.active { background-color: var(--hover); }

            &.selected {outline: 2px solid var(--accent-color);}
            
            & > .tab-text {
                min-width: 0;
                overflow: hidden;
                text-overflow: clip;
                white-space: nowrap;
                flex-grow: 1;
                text-align: left;
                background: linear-gradient(
                    to right, 
                    var(--text-color) calc(100% - 1.5em), 
                    transparent
                );
                color: transparent;
                background-clip: text;

                &:empty {
                    &::before {
                        content: "Empty tab";
                        opacity: 0.6;
                        font-style: italic;
                    }
                }
            }
            
            & > .icon {
                flex-shrink: 0;
                
                &:hover {
                    background-color: var(--hover);
                    border-radius: 0.2em;
                }
            }
        }

        & > .new-tab-button {
            flex-shrink: 0;
        }
    }

}