/*
 *  Copyright 2019 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/* grid component */
.aem-Grid {
    display: block;
    width: 100%;
}

.aem-Grid::before,
.aem-Grid::after {
    display: table;
    content: " ";
}

.aem-Grid::after {
    clear: both;
}

/* placeholder for new components */
.aem-Grid-newComponent {
    clear: both;
    margin: 0;
}

/* column of a grid */
.aem-GridColumn {
    box-sizing: border-box;
    clear: both;
}

/* force showing hidden */
.aem-GridShowHidden > .aem-Grid > .aem-GridColumn {
    display: block !important;
}

/* Generates all the rules for the grid columns up to the given amount of column */
.generate-columns(@columnTotal, @column: 1) when (@column =< @columnTotal) {

    > .aem-GridColumn.aem-GridColumn--@{breakPoint}--@{column} {
        float: left;
        clear: none;
        width: (@column * 100% / @columnTotal);
    }

    .generate-columns(@columnTotal, (@column + 1));
}

/* Generates all the rules for the grid column offset up to the given amount of column */
.generate-offsets(@columnTotal, @column: 0) when (@column =< @columnTotal) {

    > .aem-GridColumn.aem-GridColumn--offset--@{breakPoint}--@{column} {
        margin-left: (@column * 100% / @columnTotal);
    }

    .generate-offsets(@columnTotal, (@column + 1));
}

/* Generates all the rules for the grid and columns for the given break point and total of columns */
.generate-grid-columns(@breakPoint, @columnTotal) when (@columnTotal > 0) {

    &.aem-Grid--@{columnTotal} {
        .generate-columns(@columnTotal);
        .generate-offsets(@columnTotal);
    }

    &.aem-Grid--@{breakPoint}--@{columnTotal} {
        .generate-columns(@columnTotal);
        .generate-offsets(@columnTotal);
    }
}

/* Generates all the rules for the grids and columns */
.grid-loop(@breakPoint, @columnTotal, @column: 1) when (@column =< @columnTotal) {
    .generate-grid-columns(@breakPoint, @column);
    .grid-loop(@breakPoint, @columnTotal, (@column + 1));
}

/* API function to be called to generate a grid config */
.generate-grid(@breakPoint, @columnTotal) {
    .grid-loop(@breakPoint, @columnTotal);

    >.aem-GridColumn.aem-GridColumn--@{breakPoint}--newline {
        /* newline behavior */
        display: block;
        clear: both !important;
    }

    >.aem-GridColumn.aem-GridColumn--@{breakPoint}--none {
        /* none behavior */
        display: block;
        clear: none !important;
    }

    >.aem-GridColumn.aem-GridColumn--@{breakPoint}--hide {
        /* hide behavior */
        display: none;
    }
}
