@import "media.mixins.less";


// parameters
@columnWidth: (100% / 12);
@gutterWidth: 20px;


// rows
.makeRow() {
    margin-left: auto;
    margin-right: auto;
    float: none;
    .clearFix;

    & & {
        width: auto;
        margin-left: -(@gutterWidth / 2);
        margin-right: -(@gutterWidth / 2);
    }

    @media @mediumScreen {
        width: @mediumWidth;
    }

    @media @largeScreen {
        width: @largeWidth;
    }

    @media @extraLargeScreen {
        width: @extraLargeWidth;
    }
}

.makeRow(@column) when (@column) {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0 (@gutterWidth / 2);
    min-height: 1px;
    position: relative;
    .clearFix;

    & & {
        width: auto;
        margin-left: -(@gutterWidth / 2);
        margin-right: -(@gutterWidth / 2);
    }

    @media @mediumScreen {
        width: @mediumWidth;
    }

    @media @largeScreen {
        width: @largeWidth;
    }

    @media @extraLargeScreen {
        width: @extraLargeWidth;
    }
}


// columns
.makeColumn(@columns) when (isnumber(@columns)) and (@columns <= 12) {
    box-sizing: border-box;
    padding: 0 (@gutterWidth / 2);
    min-height: 1px;
    position: relative;

    @media @mediumScreen {
        float: left;
        width: @columnWidth * @columns;
    }
}

.offsetBy(@columns) when (isnumber(@columns)) and (@columns <= 11) {
    @media @mediumScreen {
        margin-left: @columnWidth * @columns;
    }
}

.pushBy(@columns) when (isnumber(@columns)) and (@columns <= 11) {
    @media @mediumScreen {
        left: @columnWidth * @columns;
    }
}

.pullBy(@columns) when (isnumber(@columns)) and (@columns <= 11) {
    @media @mediumScreen {
        right: @columnWidth * @columns;
    }
}


// clearing
.clearFix() {
    &:before, &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}