@require('./variables.styl')

sizes = mini small

@keyframes progress-bar-animation
    from
        opacity 0.2
        width unit(14 / $rem, rem)
        margin-left -unit(14 / $rem, rem)
    to
        opacity 0
        width 100%

.k-progress
    position relative
    line-height 1

    // bar
    &.k-bar
        display flex
        align-items center
        .k-container
            height $progress-height
            border-radius $progress-height
            background-color $progress-stroke-color
            overflow hidden
            position relative
            vertical-align middle
            font-size $progress-innertext-font-size
            flex 1
        .k-content
            position relative
            left 0
            top 0
            white-space nowrap
            width 100%
            height 100%
            border-radius $progress-height 
        .k-bg
            background-color $progress-normal-color
            height 100%
            border-radius $progress-height
            transition $progress-transition
            position relative
        .k-inner-text
            display inline-block
            vertical-align middle
            color #ffffff
            margin $progress-innertext-margin
            width 100%
            text-align right
            padding-right $progress-innertext-padding-right
            
        // status
        &.k-success
            .k-bg
                background $progress-success-color
            .k-icon
                color $progress-success-color
        &.k-error
            .k-bg
                background $progress-error-color
            .k-icon
                color $progress-error-color
        &.k-warning
            .k-bg
                background $progress-warning-color
        &.k-active
            .k-bg
                &:before
                    content ""
                    position absolute
                    top 0
                    bottom 0
                    right 0
                    left 0
                    background-color #fff
                    animation progress-bar-animation 2s ease infinite
                    border-radius $progress-height

        // size
        for size in sizes
            &.k-{size}
                font-size lookup('$progress-' + size + '-font-size')
                .k-container
                    height lookup('$progress-' + size + '-height')

        .k-text
            margin-left $progress-text-margin-left
            width $progress-text-width


    // circle
    &.k-circle
        width $progress-circle-width
        height @width 
        font-size $progress-circle-font-size
        .k-canvas
            transform rotate(-90deg)
        .k-meter
        .k-value
        .k-animate
            fill none
        .k-meter
            stroke $progress-stroke-color 
        .k-value
            stroke $progress-normal-color 
            stroke-linecap round
            transition $progress-transition
        .k-animate
            stroke #fff 
            stroke-linecap round
        .k-text
            position absolute
            top 50%
            text-align center
            width 100%
            transform translateY(-50%)

        // status 
        &.k-success
            .k-value
                stroke $progress-success-color
        &.k-error
            .k-value
                stroke $progress-error-color

        // size
        for size in sizes
            &.k-{size}
                width lookup('$progress-circle-' + size + '-width')
                height lookup('$progress-circle-' + size + '-width')
                font-size lookup('$progress-circle-' + size + '-font-size')


requireTheme('progress')