@require('./variables.styl')
sizes = large small mini

.k-tabs
    border-bottom $tabs-border
    position relative
    line-height 1
    .k-tab
        if $tabs-height != auto
            height $tabs-height 
            line-height s('calc(%s - 2px)', @height)
        padding $tabs-padding 
        margin $tabs-margin 
        cursor pointer
        display inline-block
        text-align center
        color $tabs-color 
        position relative
        vertical-align middle
        // close
        .k-close
            margin-right unit(-($mini-height / 2 / $rem), rem)
            margin-left -(@margin-right)
            position relative
            top -2px
            .k-icon
                font-size $tabs-close-font-size
        &:hover
        &.k-active
            color $tabs-active-color 
        // disabled
        &.k-disabled
            color $disabled-color
            cursor not-allowed
            
    // active-bar
    .k-active-bar
        transition all $transition
        position absolute
        left 0
        height $tabs-highlight-height 
        background $tabs-highlight-bg-color 
        bottom $tabs-highlight-bottom 

    // vertical
    &.k-vertical
        display inline-block
        border-bottom none
        border-right $tabs-border
        .k-tab
            display block
            margin 0
            padding $tabs-vertical-padding
        // active-bar
        .k-active-bar
            left auto
            top 0
            right $tabs-highlight-bottom 
            width $tabs-highlight-height
            height auto

    // card
    &.k-card
        .k-tab
            margin 0
        // active-bar
        .k-active-bar
            background #fff
            top 0
            height auto
            z-index -1
            border-left $tabs-border-width solid $tabs-border-color
            border-right @border-left
            &:before
                content ''
                display block
                position absolute
                height $tabs-highlight-height
                background $primary-color
                top 0
                left -($tabs-border-width)
                right -($tabs-border-width)

        // vertical card
        &.k-vertical
            .k-active-bar
                left 0
                width auto
                border-left none
                border-right none
                border-top $tabs-border-width solid $tabs-border-color
                border-bottom @border-top
                &:before
                    width $tabs-highlight-height
                    left 0
                    right auto
                    bottom 0
                    height auto

    // border-card
    &.k-border-card
        border $tabs-border
        border-bottom none
        background $tabs-border-card-bg-color
        .k-tab
            margin 0
        // active-bar
        .k-active-bar
            background #fff
            top 0
            height auto
            z-index -1

        // vertical border-card
        &.k-vertical
            border-right none
            border-bottom $tabs-border
            .k-active-bar
                width auto
                left 0
                bottom 0
                right 0

    // no-border-card
    &.k-no-border-card
        border-bottom none
        .k-tab
            margin-right $tabs-no-border-card-gutter
            &:before
                content ''
                display block
                position absolute
                background $tabs-no-border-card-bg-color 
                top 0
                bottom 0
                left 0
                right 0
                z-index -1
        // active-bar
        .k-active-bar
            border none
            &:before
                left 0
                right 0
        // vertical
        &.k-vertical
            border-right none
            .k-tab
                margin-top $tabs-no-border-card-gutter
            .k-active-bar
                border none

    // scroll
    &:not(.k-vertical)
        .k-scroll
            overflow hidden
            position relative
            // @referece https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
            padding-bottom 1px
            margin-bottom -1px
        &.k-border-card
        &.k-no-border-card
            .k-scroll
                padding-bottom 0
                margin-bottom 0
        .k-wrapper
            white-space nowrap
            float left
            transition transform $transition
        .k-prev
        .k-next
            position absolute
            top 0
            width $tabs-navigator-width
        .k-prev
            left 0
        .k-next
            right 0
        &.k-is-scroll
            padding 0 $tabs-navigator-width

    // size
    for size in sizes 
        &.k-{size}
            .k-tab
                font-size lookup('$tabs-' + size + '-font-size')
                height lookup('$tabs-' + size + '-height')
                line-height s('calc(%s - 2px)', @height)
                padding lookup('$tabs-' + size + '-padding')
                .k-close
                    if (lookup('$tabs-' + size + '-close-font-size') != null)
                        .k-icon
                            font-size lookup('$tabs-' + size + '-close-font-size')


requireTheme('tabs')