// Grid component.

@import "../../global/source/slash.global.less";
@import "slash.mixin.less";
@import "slash.variable.less";

.container {
    .container-fixed();
    @media (min-width: @screen-sm-min) {
        width: @container-sm;
    }
    @media (min-width: @screen-md-min) {
        width: @container-md;
    }
    @media (min-width: @screen-lg-min) {
        width: @container-lg;
    }
}

.row {
    > [class*=col-] {
        box-sizing: border-box;
    }
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    .col-auto {
        width: 100%;
    }
    .loop-grid(@i: length(@cols)) when (@i > 0) {
        @divider: e(extract(@cols, @i));
        @className: `Math.floor(@{divider})`;
        @n: `100 / parseFloat(@{divider})`;
        @n-1: @n - 1;
        .col-@{className} {
            width: ~"@{divider}%";
            width: ~"-webkit-calc((100% - @{grid-offset-width} * @{n-1}) / @{n})";
            width: ~"calc((100% - @{grid-offset-width} * @{n-1}) / @{n})";
        }
        .col-offset-@{className} {
            margin-left: ~"@{divider}%";
            margin-left: ~"-webkit-calc((100% - @{grid-offset-width} * @{n-1}) / @{n})";
            margin-left: ~"calc((100% - @{grid-offset-width} * @{n-1}) / @{n})";
        }
        &.no-gutter {
            .col-@{className} {
                width: ~"@{divider}%";
            }
        }
        .loop-grid((@i - 1));
    } .loop-grid;
}