@require('./variables.styl')

width = $spin-stroke-width 
r = 120 - 60 - (width / 2)
c = round(2 * 3.14 * r)

.k-spin
    display inline-block
    .k-canvas
        width $spin-width 
        height @width 
        animation c-rotate 2s linear infinite
    .k-circle
        stroke-dasharray: round(c * 0.75), c;
        stroke-dashoffset: 0;
        fill none
        stroke-width width 
        stroke $spin-color 
        r r 
        animation k-spin-dash 1.5s ease-in-out infinite

    // size
    for size in large small mini
        &.k-{size}
            .k-canvas
                width lookup('$spin-' + size + '-width')
                height @width

    // center
    &.k-center
        position absolute
        z-index 1
        top 50%
        left 50%
        transform translate(-50%, -50%)
    // overlay
    &.k-overlay
        position absolute
        z-index 1
        top 0
        bottom 0
        left 0
        right 0
        background rgba(255, 255, 255, .5)
        .k-wrapper
            @extend .k-spin.k-center


@keyframes k-spin-dash {
    0% {
        stroke-dasharray: 1, c;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: round(c * 0.75), c;
        stroke-dashoffset: -(c * 0.25)
    }

    to {
        stroke-dasharray: round(c * 0.75), c;
        stroke-dashoffset: -(c)
    }
}

requireTheme('spin')