.tabbar {
    height:$tabbar-height;
    
    display:flex;
    align-items: center;
    border-bottom: 1px solid $background-lighter2;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    box-sizing: border-box;
    
    .tab {
        height:calc(#{$tabbar-height} - 2px);
        width:auto;
        padding: 0 10px 0 10px;
        color:$color;
        line-height: $tabbar-height;
        text-align: center;
        cursor: pointer;
        margin: 0 5px 0 5px;
        box-sizing: border-box;
       
        // Hover on it
        &:hover {
            border-bottom: 1px solid $color-top;
            background-color: $background-lighter;
        }
        // Clic on it
        &:active {
            background-color: $background-lighter2;
        }
        // tab selected
        &.active {
            border-bottom: 1px solid $color-top;
        }
    }

    .more-tabs {
        width           : $tabbar-height;
        height          : $tabbar-height;
        display         : flex;
        justify-content : center;
        align-items     : center;
        cursor          : pointer;
        position        : relative;
        border-right    : 1px solid $background-lighter2;
        &:hover {
            background-color: $background-lighter2;
        }
        &:active {
            color:$color-top;
            background-color: $background-lighter3;
        }
        // This tool is activated
        &.active {
            color:$color-top;
        }

    }
}