@import '../style/theme.less';
* {
    min-height: 0;
    min-width: 0;
}

.@{prefix}-flexbox {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    align-self: auto;
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
    order: 0;
}

.commonPropSet(@prop, @shortProp, @val, @shortVal) {
    .@{prefix}-flexbox@{shortProp}-@{shortVal} {
        @{prop}: @val
    }
}

.commonPropsSet(@prop, @shortProp, @list, @shortList) {
    @len: length(@list);
    .set(@index) when (@index<=@len) {
        .commonPropSet(@prop, @shortProp, extract(@list, @index), extract(@shortList, @index));
        .set(@index+1);
    }
    .set(1);
}

@list1: row row-reverse column column-reverse;
.commonPropsSet(flex-direction, ~'-direction', @list1, @list1);
.@{prefix}-flexbox-direction-row>.@{prefix}-flexbox,
.@{prefix}-flexbox-direction-row-reverse>.@{prefix}-flexbox {
    width: 100%;
}

.@{prefix}-flexbox-direction-column>.@{prefix}-flexbox,
.@{prefix}-flexbox-direction-column-reverse>.@{prefix}-flexbox {
    height: 100%;
}

.make-flexbox(@class: ~'') {
    /*wrap*/
    @list2: nowrap wrap wrap-reverse;
    .commonPropsSet(flex-wrap, ~'@{class}-wrap', @list2 , @list2);
    /*justify*/
    @list3: flex-start flex-end flex-start flex-end center space-around space-between;
    @shortList3: start end flex-start flex-end center space-around space-between;
    .commonPropsSet(justify-content, ~'@{class}-justify', @list3 , @shortList3);
    /*alignContent*/
    @list4: flex-start center flex-end flex-start flex-end center space-around space-between stretch;
    @shortList4: top middle bottom flex-start flex-end center space-around space-between stretch;
    .commonPropsSet(align-content, ~'@{class}-alignContent', @list4, @shortList4);
    /*align*/
    @list5: flex-start center flex-end flex-start flex-end center baseline stretch;
    @shortList5: top middle bottom flex-start flex-end center baseline stretch;
    .commonPropsSet(align-items, ~'@{class}-align', @list5, @shortList5 );
    /*alignSelf*/
    @list6: flex-start center flex-end auto flex-start flex-end center baseline stretch;
    @shortList6: top middle bottom auto flex-start flex-end center baseline stretch;
    .commonPropsSet(align-self, ~'@{class}-alignSelf', @list6, @shortList6 );
    .box(@index) {
        @item: ~'.@{prefix}-flexbox@{class}-@{index}';
        .box(@index+1, '@{item}');
    }
    .box(@index, @list) when (@index<=@grid-columns) {
        @item: ~'.@{prefix}-flexbox@{class}-@{index}';
        .box(@index+1, ~'@{list},@{item}');
    }
    .box(@index, @list) when (@index>@grid-columns) {
        @{list} {
            display: flex;
        }
    }
    .box(0);
    .@{prefix}-flexbox@{class}-shrink-0 {
        flex-shrink: 0;
    }
    .@{prefix}-flexbox@{class}-shrink-1 {
        flex-shrink: 1;
    }
    .basis(@index) when(@index<=@grid-columns) {
        .@{prefix}-flexbox@{class}-@{index} {
            flex-grow: 0;
            flex-basis: percentage( @index/@grid-columns)
        }
        .basis(@index+1)
    }
    .basis(0);
    .order(@index) when(@index<=@grid-columns) {
        .@{prefix}-flexbox@{class}-order-@{index} {
            order: @index;
        }
        .order(@index+1)
    }
    .order(0);
    .grow(@index) when(@index<=@grid-columns) {
        .@{prefix}-flexbox@{class}-grow-@{index} {
            flex-grow: @index;
        }
        .grow(@index+1)
    }
    .grow(0);
    .offset-left(@index) when(@index<=@grid-columns) {
        .@{prefix}-flexbox-direction-row>.@{prefix}-flexbox@{class}-offset-@{index} {
            margin-left: percentage( @index/@grid-columns);
        }
        .offset-left(@index+1)
    }
    .offset-left(0);
    .offset-right(@index) when(@index<=@grid-columns) {
        .@{prefix}-flexbox-direction-row-reverse>.@{prefix}-flexbox@{class}-offset-@{index} {
            margin-right: percentage( @index/@grid-columns);
        }
        .offset-right(@index+1)
    }
    .offset-right(0);
}

.make-flexbox-media(@class, @minWidth) {
    @media (min-width: @minWidth) {
        .make-flexbox(~'-@{class}')
    }
}

.make-flexbox();
.make-flexbox-media(xs, 0);
.make-flexbox-media(sm, @screen-xs-min);
.make-flexbox-media(md, @screen-sm-min);
.make-flexbox-media(lg, @screen-md-min);
.make-flexbox-media(xl, @screen-lg-min);