@require('./variables.styl');
@require('../affix/variables.styl')

.k-table
    position relative
    overflow hidden
    table
        table-layout fixed
        width 100%
        border-collapse collapse
        border-spacing 0
    .k-tbody
        font-size $table-font-size
        color $table-color

    // thead
    .k-thead
        font-size $table-thead-font-size
        color $table-thead-color
        border-top $table-th-border-top 
        background $table-thead-bg-color
        // -webkit-backface-visibility hidden
        z-index 1
        overflow hidden
        width 100%
        tr
            border-bottom $table-th-border-bottom
    .k-thead-wrapper
        display table
    th
        padding $table-th-padding
        text-align $table-th-text-align 
        font-weight $table-th-font-weight
        position relative
    .k-th
        display flex

    // sortable
    .k-sortable
        cursor pointer
    .k-sort
        margin-left $table-sort-margin-left
        width 2 * $table-sort-icon-width
        position relative
        .k-icon
            display block
            height $table-sort-icon-height
            position absolute
            top 50%
            margin-top -(unit(@height / 2, rem))
            &:before
            &:after
                content ''
                border $table-sort-icon-width solid transparent
                border-color $table-sort-active-color transparent
                position absolute
            &:before
                top 0
                border-top-width 0
            &:after
                bottom 0
                border-bottom-width 0
        .icon-asc:after
        .icon-desc:before
            border-color $table-sort-non-active-color transparent

    // group
    .k-group
        cursor pointer
        max-width 100%
        .k-arrow
            display inline-block
            transition transform $transition
            float right
            margin-left $table-group-margin-left 
            line-height unit($table-thead-font-size * $line-height, rem)
    .k-group-show
        .k-group
            .k-arrow
                transform rotate(180deg)

    // resizable
    .k-resize
        height 100%
        width $table-resize-width 
        position absolute
        top 0
        left -1px 
        cursor ew-resize

    // stripe
    &.k-stripe
        tr:nth-child(even)
            background $table-even-tr-bg-color
            &.k-hover
                background $table-tr-hover-bg-color

    // tbody
    .k-tbody
        border-bottom $table-tr-border
        overflow auto
        tr
            border-bottom $table-tr-border
            transition background $transition
            &.k-hover
                background $table-tr-hover-bg-color
            // selected
            &.k-selected
                background $table-tr-selected-bg-color
            &:last-of-type
                border none

    td
        padding $table-td-padding
        word-wrap break-word

    // align
    for align in center right
        td.k-{align}
        th.k-{align}
            text-align align
        th.k-{align}
            .k-th
                if align == right
                    justify-content flex-end
                else
                    justify-content align

    // checkbox or radio
    .k-th-check
        width $table-check-width
        // FixMe: force checkbox vertical algin
        .k-checkbox
            position relative
            top -1px

    // no data
    .k-no-data
        text-align center

    // fixed column
    .k-invisible
        visibility hidden
    .k-fixed-left
    .k-fixed-right
        // border-top $table-th-border-top
        position absolute
        top 0
        overflow hidden
        z-index $affix-z-index
        .k-thead
            width auto
        .k-tbody
            overflow-x hidden
    .k-fixed-left
        left 0
        .k-tbody
            margin-right -15px
    .k-fixed-right
        right 0
        .k-thead-wrapper
        .k-tbody
        .k-tbody table
            float right
    &.k-scroll-left .k-fixed-right
    &.k-scroll-middle .k-fixed-right
        box-shadow $box-shadow
    &.k-scroll-right .k-fixed-left
    &.k-scroll-middle .k-fixed-left
        box-shadow $box-shadow

    // type: border
    // type: grid
    &.k-border
    &.k-grid
        .k-thead
        .k-tbody
            border-left $table-border-left
            border-right $table-border-right
        .k-body
            tr:last-of-type
                border none
    // type: grid
    &.k-grid
        td:not(:last-of-type)
        th:not(:last-of-type)
            border-right $table-border-right 
    .k-fixed-left
        .k-thead
        .k-tbody
            // border-right-color transparent
            border-right none
    .k-fixed-right
        .k-thead
        .k-tbody
            // border-left-color transparent
            border-left none

    // sticky
    &.k-sticky
        z-index 2

    // sticky scrollbar
    &.k-sticky-scrollbar
        .k-scrollbar
            // position fixed 
            overflow-x auto
            overflow-y hidden
            // bottom 0
            // z-index $max-z-index
            > .k-inner
                height 1px
    // loading
    > .k-spin
        z-index 2

    // expanded
    tr.k-expand
        background $table-expanded-tr-bg-color

    // fluid height
    &.k-fluid-height
        .k-table-wrapper
            height 100%
            display flex
            flex-direction column
        .k-tbody
            flex 1

    // tree arrow
    .k-table-arrow.k-mini
        vertical-align $table-arrow-vertical-align 
        margin-right $table-arrow-margin-right 
        transition transform $transition
        width $table-arrow-width 
        height $table-arrow-height 
        .k-icon
            line-height 1
    tr.k-spread
        .k-table-arrow
            transform rotate(90deg)
    tr.k-hidden
        display none

.k-table-wrapper
    // overflow auto
    overflow hidden
    // border-top $table-th-border-top
    background $table-bg-color

// group
.k-table-dropdown
    max-height $table-group-height
    overflow auto
    .k-item.k-hover
        background $table-group-item-hover-bg-color 
        color $table-group-item-hover-color 
    &:not(.k-multiple)
        .k-item.k-active
            color $table-group-item-active-color 


requireTheme('table')