// ==========================================================================
// Grid
// ==========================================================================

.fui-row *,
.fui-row :after,
.fui-row :before {
    box-sizing: border-box;
}

$columns: 12;
$grid-gutter-width: 20px;

.fui-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc($grid-gutter-width / -2);
    margin-left: calc($grid-gutter-width / -2);

    &.small-padding,
    &.small-gutters {
        margin-right: calc($grid-gutter-width / -4);
        margin-left: calc($grid-gutter-width / -4);

        > .fui-col,
        > [class^="fui-col-"] {
            padding-right: calc($grid-gutter-width / 4);
            padding-left: calc($grid-gutter-width / 4);
        }
    }

    &.no-padding,
    &.no-gutters {
        margin-right: 0;
        margin-left: 0;

        > .fui-col,
        > [class^="fui-col-"] {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

.fui-col,
[class^="fui-col-"] {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: calc($grid-gutter-width / 2);
    padding-left: calc($grid-gutter-width / 2);
}

// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
    .fui-col-#{$i} {
        flex: 0 0 percentage(calc($i / $columns));
        max-width: percentage(calc($i / $columns));
    }
}

.fui-col-auto {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
