@require('./variables.styl')

.k-steps
    width 100%
    .k-step
        float left
        position relative
    .k-icon:before
        font-size $steps-head-icon-font-size 
    .k-title
        display inline-block
        padding-right $steps-main-title-padding-right 
        font-weight $steps-main-title-font-weight 
        white-space nowrap
    .k-content
        font-size $steps-main-content-font-size 
        white-space nowrap
    .k-inner
    .k-main
        transition all $transition

    // default and line type
    &.k-default
    &.k-line
        .k-head
            padding-right $steps-head-padding-right 
            .k-inner
                width $steps-head-inner-width 
                height @width 
                line-height s('calc(%s - 2px)', @width)
                border-radius 50%
                text-align center
                border $steps-head-inner-border
                if $steps-head-color != inherit
                    color $steps-head-color 
        .k-icon:before
            line-height s('calc(%s - 2px)', $steps-head-inner-width)
        .k-main
            color $steps-main-color 
        .k-tail
            position absolute
        .k-step:last-of-type
            .k-tail
                display none
        // done
        .k-done
            .k-inner
                color $steps-done-head-color 
                border-color $steps-done-head-inner-border-color 
        // active
        .k-active
            .k-inner
                color $steps-active-head-color 
                border-color $steps-active-head-inner-border-color 
                background $steps-active-head-inner-bg-color 
            .k-main
                color $steps-active-main-color 
        // error
        .k-error
            .k-inner
                color $steps-error-head-color 
                border-color $steps-error-head-inner-border-color
                background $steps-error-head-bg-color 
            .k-main
                color $steps-error-main-color 

    // default and simple type
    &.k-simple
    &.k-default
        text-align center
        height $steps-height 
        overflow hidden
        line-height @height
        .k-head
        .k-main
        .k-content
            display inline-block
        .k-head
            .k-inner
                display inline-block
        .k-step
            white-space nowrap
        .k-wrapper
            overflow hidden

    // default
    &.k-default
        background $steps-bg-color
        calcBorderWidth()
            return $steps-height / 2 + $steps-gutter 
        .k-tail
            top 0
            right -(calcBorderWidth())
            width calcBorderWidth() 
            height $steps-height 
            overflow hidden
            z-index 1
            &:after, &:before
                content ''
                border-width calcBorderWidth()
                border-style solid
                border-color transparent
                position absolute
                top -(calcBorderWidth() - $steps-height / 2)
            &:after
                border-left-color $steps-bg-color
                left -($steps-head-padding-right)
            &:before
                border-left-color $steps-line-bg-color
                left 0 
        .k-head
            .k-inner
                vertical-align middle
                margin-top -2px
        .k-step:not(:first-of-type)
            padding-left calcBorderWidth()
    
    // line type
    &.k-line
        display flex
        .k-step
            flex 1
            width auto !important
        .k-head
        .k-main
            float left
        .k-head
            background $steps-line-bg-color
            position relative
        .k-main
            position relative
        .k-title
            line-height $steps-head-inner-width 
            background $steps-line-bg-color
        .k-content
            margin $steps-line-main-content-margin 
        .k-tail
            left 0
            right $steps-head-padding-right 
            top ($steps-head-inner-width / 2)
            height 1px
            background $steps-line-tail-bg-color 
        .k-step:last-of-type
            flex 0 0 auto
            .k-wrapper
                display flex
            .k-title
                padding-right 0
        // done
        .k-done
            .k-tail
                background $steps-line-done-tail-bg-color 

    // simple type
    &.k-simple
        .k-step
        .k-main
            color $steps-simple-color 
        .k-head
            padding-right $steps-simple-head-padding-right 
            vertical-align top
            if $steps-simple-head-font-weight != normal
                font-weight $steps-simple-head-font-weight 
        if $steps-simple-head-font-weight != normal
            .k-icon:before
                font-weight $steps-simple-head-font-weight 
        .k-done
            .k-main
            .k-inner
                color $steps-simple-done-color 
        .k-active
            .k-main
            .k-inner
                color $steps-simple-active-color
        .k-error
            .k-main
            .k-inner
                color $steps-simple-error-color

    // clickable
    &.k-clickable
        .k-done
            cursor pointer


requireTheme('steps')