@tabs-prefix-cls: ~"@{css-prefix}tabs";

.@{tabs-prefix-cls} {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    color: #555555;
    .clearfix;

    &-bar {
        outline: none;
        margin-bottom: 16px;
    }

    &-ink-bar {
        height: 2px;
        box-sizing: border-box;
        background-color: #1f88e3;
        position: absolute;
        left: 0;
        bottom: 1px;
        z-index: 1;
        transition: transform .3s @ease-in-out;
        transform-origin: 0 0;
    }

    &-bar {
        border-bottom: 1px solid @border-color-base;
        margin-bottom: 16px;
    }

    &-nav-container {
        margin-bottom: -1px;
        line-height: @line-height-base;
        font-size: @font-size-base;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        .clearfix;
    }

    &-nav-container-scrolling {
        padding-left: 32px;
        padding-right: 32px;
    }

    &-nav-wrap {
        overflow: hidden;
        margin-bottom: -1px;
    }
    &-contextmenu {
        z-index: 99999;
        position: fixed !important;
        min-width: 100px;
        background-color: white;
        border: 1px solid #d7d7d7;
        &>ul>li {
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            &:hover{
                background-color: #f4f6f9;
            }
        }
    }
    &-nav-scroll {
        overflow: hidden;
        white-space: nowrap;
    }

    &-nav-right{
        float: right;
        position: absolute;
        right: 10px;
        top: 5px;
    }

    &-cardnav {
        padding-left: 0;
        margin: 0;
        width:100%;
        height:36px;
        float: left;
        list-style: none;
        background: #e9e9e9;
        box-sizing: border-box;
        border: 1px solid #e3e3e3;
        //border-bottom:0;
        position: relative;
        transition: transform 0.5s @ease-in-out;
        .@{tabs-prefix-cls}-tab-disabled {
            pointer-events: none;
            cursor: default;
            color: #ccc;
        }

        .@{tabs-prefix-cls}-tab {
            display: inline-block;
            height: 100%;
           // min-width:93px;
            width: 112px;
            text-align: center;
            line-height:36px;
            box-sizing: border-box;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            transition: color .3s @ease-in-out;
            padding: 0px 14px;

            &:hover {
                /* color: @link-hover-color;*/
            }

            &:active {
                /* color: @link-active-color;*/
            }
            .@{css-prefix-iconfont} {
                width: 14px;
                height: 14px;
                margin-right: 8px;
            }
        }

        .@{tabs-prefix-cls}-tab-active {
            color: @primary-color;
        }
        i.icon.iconfont.icon-Leftarrows {
            position: absolute;
            top:  -1px;
            left: -1px;
            float: left;
            height: 38px;
            line-height: 38px;
            /*border: 1px solid #b4c1c9;*/
            padding: 0 5px;
            z-index: 1;
            background: #e9e9e9;
            cursor: pointer;
        }
        i.icon.iconfont.icon-Right-arrows {
            position: absolute;
            top:  -1px;
            right: -1px;
            height: 38px;
            line-height: 38px;
           /* border: 1px solid #b4c1c9;*/
            padding: 0 5px;
            z-index: 999;
            background-color: #e9e9e9;
            cursor: pointer;
        }
    }
    &-move {
        position: absolute;
        left: 0;
        height: 34px;
        transition:All 0.2s ease-in-out;
    }
    &-spanW {
        font-size: 12px;
        width: 48px;
        display: inline-block;
    }
    &-nav {
        padding-left: 0;
        margin: 0;
        float: left;
        list-style: none;
        box-sizing: border-box;
        position: relative;
        transition: transform 0.5s @ease-in-out;

        &:before,
        &:after {
            display: table;
            content: " ";
        }

        &:after {
            clear: both;
        }

        .@{tabs-prefix-cls}-tab-disabled {
            pointer-events: none;
            cursor: default;
            color: #ccc;
        }

        .@{tabs-prefix-cls}-tab {
            display: inline-block;
            height: 100%;
            min-width:93px;
            line-height:38px;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            transition: color .3s @ease-in-out;
            &:hover {
                /*color: @link-hover-color;*/
            }

            &:active {
                /* color: @link-active-color;*/
            }
            .@{css-prefix-iconfont} {
                width: 14px;
                height: 14px;
                margin-right: 8px;
            }
        }

        .@{tabs-prefix-cls}-tab-active {
            color: #3a68ad;
           /* font-weight: bold;*/
        }
    }
    &-mini &-nav-container {
        font-size: @font-size-base;
    }

    &-mini &-tab {
        font-size: @font-size-small;
    }

    & {
        .@{tabs-prefix-cls}-content-animated {
            display: flex;
            flex-direction: row;
            will-change: transform;
            transition: transform .3s @ease-in-out;
        }

        .@{tabs-prefix-cls}-tabpane {
            flex-shrink: 0;
            width: 100%;
            transition: opacity .3s;
            opacity: 1;
        }

        .@{tabs-prefix-cls}-tabpane-inactive {
            opacity: 0;
            height: 0;
        }
    }

    // card style
    &&-card > &-bar &-nav-container {
        height: 36px;
    }
    &&-card > &-bar &-ink-bar {
        visibility: hidden;
    }
    &&-card > &-bar &-tab {
       // border-right:1px solid @border-color-base;
        transition: all 0.3s @ease-in-out;
        background: #e9e9e9;
    }
    &&-card > &-bar &-tab-active {
        height: 36px;
        padding-bottom: 5px;
        background: #fff;
        transform: translateZ(0);
        border-color: @border-color-base;
        border-bottom:none;
        color: #555555;
        font-size: 12px;
    }
    &&-card > &-bar &-tab-active:before{
        /* content: '';
         display: block;
         width:100%;
         height: 2px;
         background: @primary-color;
         position: absolute;
         top:0px;
         left:0px;*/
    }
    &&-card > &-bar &-nav-wrap {
        margin-bottom: 0;
    }
    &&-card > &-bar &-tab .icon-chuyidong {
        width: 0;
        height: 16px;
        font-size: 16px;
        margin-right: 0;
        color: #555555;
        text-align: right;
        vertical-align: middle;
        overflow: hidden;
        position: relative;
        top: 0;
        transform-origin: 100% 50%;
        /*transition: all 0.3s @ease-in-out;*/
        &:hover {
           // color: #db4436 !important;
        }
    }

    &&-card > &-bar &-tab .icon-shibai{
        width:16px;
    }

    &&-card > &-bar &-tab-active .icon-chuyidong,
    &&-card > &-bar &-tab:hover .icon-chuyidong {
        width: 16px;
        transform: translateZ(0);
    }
}

.@{tabs-prefix-cls}-no-animation{
    .@{tabs-prefix-cls}-content {
        transform: none!important;

        > .@{tabs-prefix-cls}-tabpane-inactive {
            display: none;
        }
    }
}
i.icon  {
    display: inline-block;
    font-family: Ionicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-shibai {
    display: initial !important;
    width: 0;
    height: 16px;
    font-size: 16px;
    margin-right: 0;
    text-align: right;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: 0;
    transform-origin: 100% 50%;
    /*transition: all 0.1s @ease-in-out;*/
    color: #db4436 !important;
}
