@import './mixins/background.styl'

@keyframes progressStriped
    0%
        background-position 0 
    100% 
        background-position 36px
 
.ocProgress
    .out
        display inline-block
        vertical-align middle
    .out, .inner
        display inline-block
        background-color #f5f5f5
        box-shadow inset 0 1px 2px rgba(0, 0, 0, .1)
        position relative
        vertical-align middle
        margin-right 10px
    .inner
        background-color #0e90d2
        color #fff
        text-align center
        position absolute
        left 0
        height 100%
        top 0
        line-height inherit
        font-size 1em
        border-radius inherit
        background-image inherit
        background-size inherit
        backgroundColor(#fff)
    .inner[striped]
        background-size 36px 36px
        background-image linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
    .inner[active]
        animation progressStriped 1.2s linear infinite
    
    
    
    // .inner[type="secondary"]
    //     background-color #21d376
    // .inner[type="light"]
    //     background-color #9dc203
    // .inner[type="emphasize"]
    //     background-color #ad35bb
    // .inner[type="yellow"]
    //     background-color #e9c311
    // .inner[type="red"]
    //     background-color #ff6e72