.tabs{
    // height: 55px;
    height: 44px;
    background: #fff;
    //border-bottom: 1px solid #d9d9d9;
    border-bottom: 1px solid $borderColor2;

    display: flex;
    padding: 0 10px;
    // padding: 0 16px;
    .item{
        margin: 0 10px;
        position: relative;
        display: flex;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #000;
        // padding-top: 22px;
        padding-top: 16px;
        min-width: 60px;
        text-align: center;
        justify-content: center;
        // border: 1px solid #000;
        &:hover{
            @include themeColor('color','hover');
        }
        &:active{
            @include themeColor('color','active');
        }
        &.active{
            @include themeColor('color','active');
            &::before{
                content: "";
                display: block;
                position: absolute;
                bottom: -1px;
                // left: 6px;
                // right: 6px;
                left: 0;
                right: 0;
                // width: 60px;
                height: 2px;
                margin: auto;
                @include themeColor('background-color','active');
            }
        }

    }
    .items{
        display: flex;
    }
    .other{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // padding-right: 10px;
        flex: 1;
    }
}

.tabs2{
    height: 40px;
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    .items{
        display: flex;
    }
    .item{
        position: relative;
        min-width: 100px;
        background: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #000000;
        padding: 0 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid #d9d9d9;
        border-right: none;
        position: relative;
        bottom:-1px;
        &:nth-last-of-type(1){
            border-right: 1px solid #d9d9d9;
            border-radius:  0  8px 0  0 ;
        }
        &:nth-of-type(1){
            border-radius: 8px 0 0 0;
        }

        &.active{
            background: #fff;
            border-bottom-color: #fff;
            position: relative;
            @include themeColor("color",'active');

        }
        &:hover{
            background: #fff;
            @include themeColor("color",'active');
        }
    }
    .other{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;

    }

}

.tabs3{
    height: 36px;
    background: #fff;
    border-bottom: 1px solid $borderColor2;
    display: flex;
    gap: $spacing;
    margin-top: $spacing_max;
    .item{
        position: relative;
        font-size: $fontSize;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #384252;
        // padding-top: 22px;
        //padding-top: 16px;
        min-width: 80px;
        text-align: center;
        justify-content: center;
        background: #EDEEF3;
        height: 36px;
        border-radius: $radius_mini $radius_mini 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid #000;
        padding: 0 16px;
        &:hover{
            @include themeColor('color','hover');
        }
        &:active{
            @include themeColor('color','active');
        }
        &.active{
            @include themeColor('color','active');
            @include themeColor('background-color','hover',0.1);
            font-weight: bold;
        }

    }
    .items{
        display: flex;
        gap: $spacing;
    }
    .other{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // padding-right: 10px;
        flex: 1;
    }
}