.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: $tabs-bar-margin-bottom

    &-nav-container
        margin-bottom: -1px
        line-height: $line-height-base
        font-size: $tabs-font-size
        box-sizing: border-box
        white-space: nowrap
        overflow: hidden
        position: relative

    &-nav 
        display: flex
        padding-left: 0
        margin: 0
        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
            flex: 1
            display: inline-block
            height: 100%
            line-height: 100%
            text-align: center
            vertical-align: middle
            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-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: $tabs-height
    
    &&-card > &-bar &-ink-bar 
        visibility: hidden

    &&-card > &-bar &-tab
        margin: 0
        margin-right: $tabs-card-marigin-right
        height: $tabs-content-height
        line-height: $tabs-content-height
        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: $tabs-height
        padding-bottom: 5px
        background: #fff
        transform: translateZ(0)
        border-color: $border-color-base
        color: $primary-color
    &&-card > &-bar &-nav-wrap
        margin-bottom: 0

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

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