@require('../../styles/mixin.styl')
@require('./variables.styl')

.k-row
    position relative
    width 100%
    &:not(.k-flex)
        display block
        clearfix()
    // flex layout
    &.k-flex
        display flex
        flex-wrap wrap
        // justify
        &.k-justify-start
            justify-content flex-start
        &.k-justify-end
            justify-content flex-end
        &.k-justify-center
            justify-content center
        &.k-justify-between
            justify-content space-between
        &.k-justify-around
            justify-content space-around
        &.k-justify-evenly
            justify-content space-evenly
        // align
        &.k-align-top
            align-items flex-start
        &.k-align-bottom
            align-items flex-end
        &.k-align-middle
            align-items center
        &.k-align-stretch
            align-items stretch
        &.k-align-baseline
            align-items baseline

.k-col
    position relative
    width 100%
    float left
    generate(size)
        for col in (0..24)
            &.k{size}-{col}
                width percentage(col / 24)
            &.k{size}-offset-{col}
                margin-left percentage(col / 24)
            &.k{size}-order-{col}
                order col
            &.k{size}-push-{col}
                left percentage(col / 24)
            &.k{size}-pull-{col}
                right percentage(col / 24)
    generate('')
    for size in sm md lg xl xxl
        minWidth = lookup('$' + size + '-min-width')
        @media (min-width: minWidth)
            generate('-' + size)


requireTheme('grid')