.tn-common-tabbar-container {
    padding: 4px 0;
    overflow: auto;
    // width: 100px;
    // flex: 1 1 auto;
    // max-width: 80%;
    // box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);

    &::-webkit-scrollbar {
        display: none;
    }
    .scrollable {
        // width: 100%;
        // overflow: auto;
        display: flex;
        align-items: center;
        
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .tab-item {
        min-width: 100px;
        display: flex;
        padding: 1px 8px;

        background-color: #f5f5f5;
        
        align-items: center;
        border-radius: 4px;
        transition: all .3s;
        cursor: pointer;

        &:not(:first-of-type) {
            margin-left: 4px;
        }

        .content {
            margin: 0 auto;
        }

        .content, .ope {
            color: #888;
            transition: all .3s;
            >div {
                white-space: nowrap;
            }
        }
        &:hover {
            background-color: #eaeaea;

        }

        .ope {
            width: 16px;
            height: 16px;
            margin-left: 4px;
            font-weight: bold;
        }

        &.active {
            
            background-color: #1DA57A;
            .content, .ope {
                color: white;
            }
        }
    }
}