@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace zan {
    @b tabs {
        position: relative;
    }
    @b tabs-line {
        height: 44px;
        background-color: $c-white;
        &::after {
            @mixin border-retina (top);
            @mixin border-retina (bottom);
        }
        @b tabs-nav-bar {
            display: block;
        }
    }
    @b tabs-card {
        height: 28px;
        margin: 0 15px;
        background-color: $c-white;
        border-radius: 2px;
        border: 1px solid #666666;
        overflow: hidden;
        .zan-tabs-nav-bar {
            display: none;
        }
        .zan-tab {
            color: #666666;
            line-height: 28px;
            border-right: 1px solid #666666;
            &:last-child {
                border-right: none;
            }
            &.zan-tab-active {
                background-color: #666666;
                color: $c-white;
            }
        }
    }
    @b tabs-nav {
        display: flex;
        transition: transform .5s cubic-bezier(.645, .045, .355, 1);
        position: relative;
        /*float: left*/
        &::after, &::before {
            display: table;
            content: " "
        }
        &::after {
            clear: both
        }
    }
    @b tabs-nav-bar {
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        background-color: #f13e3a;
        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
        transform-origin: 0 0;
    }
    @b tab {
        color: $c-black;
        font-size: 14px;
        line-height: 44px;
        flex: 1;
        display: inline-block;
        box-sizing: border-box;
        transition: color .3s cubic-bezier(.645, .045, .355, 1);
        cursor: pointer;
        text-align: center;
    }
    @b tab-active {
        color: #FF4444;
    }
    @b tabs-pane {
        display: none;
        @when select {
            display: block;
        }   
    }
}