.view-tabs
    box-sizing: border-box
    position: relative
    overflow: hidden
    color: $text-color
    clearfix()
    &-bar
        outline: none

    &-ink-bar
        height: 2px
        box-sizing: border-box
        background-color: $primary-color
        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

    &-nav-scroll
        overflow: hidden
        white-space: nowrap

    &-nav-right
        float: right

    &-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

        .view-tabs-tab-disabled
            pointer-events: none
            cursor: default
            color: #ccc

        .view-tabs-tab
            display: inline-block;
            height: 100%;
            padding: 8px 16px;
            margin-right: 16px;
            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

            .view-icon
                width: 14px
                height: 14px
                margin-right: 8px

        .view-tabs-tab-active 
            color: $primary-color

    &-mini &-nav-container 
        font-size: $font-size-base

    &-mini &-tab
        margin-right: 0
        padding: 8px 16px
        font-size: $font-size-small
    

    &
        .view-tabs-content-animated
            display: flex
            flex-direction: row
            will-change: transform
            transition: transform .3s $ease-in-out

        .view-tabs-tabpane
            flex-shrink: 0
            width: 100%
            transition: opacity .3s
            opacity: 1

        .view-tabs-tabpane-inactive 
            opacity: 0
            height: 0


    // card style
    &&-card > &-bar &-nav-container
        height: 32px
    
    &&-card > &-bar &-ink-bar 
        visibility: hidden

    &&-card > &-bar &-tab
        margin: 0
        margin-right: 4px
        height: 31px
        padding: 5px 16px 4px
        border: 1px solid $border-color-base
        border-bottom: 0
        border-radius: $btn-border-radius $btn-border-radius 0 0
        transition: all 0.3s $ease-in-out
        background: $table-thead-bg

    &&-card > &-bar &-tab-active
        height: 32px
        padding-bottom: 5px
        background: #fff
        transform: translateZ(0)
        border-color: $border-color-base
        color: $primary-color
    &&-card > &-bar &-nav-wrap
        margin-bottom: 0
    &&-card > &-bar &-nav-wrap
        margin-bottom: 0

    &&-card > &-bar &-tab .ion-ios-close-empty
        width: 0
        height: 22px
        font-size: 22px
        margin-right: 0
        color: $legend-color
        text-align: right
        vertical-align: middle
        overflow: hidden
        position: relative
        top: -1px
        transform-origin: 100% 50%
        transition: all 0.3s $ease-in-out;
        &:hover
            color: #444

    &&-card > &-bar &-tab-active .ion-ios-close-empty,
    &&-card > &-bar &-tab:hover .ion-ios-close-empty 
        width: 14px
        transform: translateZ(0)

.view-tabs-no-animation
    > .view-tabs-content 
        transform: none!important

        > .view-tabs-tabpane-inactive
            display: none