//**********************************************************
// Layout
//----------------------------------------------------------
//
// layout
//
// grid
// grid-[1...n]
//
// shrink
//
// gap
// gap-half
// gap-0
// gap-b[1...n]
// gap-b[1...n]-0
//
// order-[1...n]
// order-b[1...n]-[1...n]
//
// span-[1...n]
// span-b[1...n]-[1...n]
//
// row
//
// col
// col-0
// col-[1...n]
// col-b[1...n]-0
// col-b[1...n]-[1...n]
//
// list
//
// bar
//
//**********************************************************

// Layout
.#{$prefix}layout {
    width:        100%;
    max-width:    $layout_width;
    margin-left:  auto;
    margin-right: auto;

    @include setPropsAdaptive((
            padding-left: $layout_gap,
            padding-right: $layout_gap
    ));
}

// Grid
.#{$prefix}grid {
    display:        grid;
    grid-auto-rows: minmax($cell, auto);
}

%grid {
    @extend .#{$prefix}grid;
    @extend .#{$prefix}gap;
    grid-auto-flow: row;
}

.#{$prefix}gap {
    @include setPropsAdaptive((
            grid-gap: $grid_gap
    ));

    &-half {
        @include setPropsAdaptive((
                grid-gap: $grid_gap_half
        ));
    }

    &-0 {
        grid-gap: 0;
    }
}

.#{$prefix}row {
    @extend .#{$prefix}grid;
    grid-template-columns: repeat(auto-fit, minmax($cell, auto));
    grid-auto-flow:        column;
}

.#{$prefix}col {
    @extend .#{$prefix}grid;
    grid-template-rows: repeat(auto-fit, minmax($cell, auto));
    grid-auto-flow:     dense;

    &-0 {
        display: none;
    }
}

%col {
    width:     auto;
    max-width: none;
    @extend %margin-0;
}

.#{$prefix}bar {
    @extend .#{$prefix}row;
    // TODO: bar
}

.#{$prefix}list {
    @extend .#{$prefix}col;
    // TODO: list
}

@for $i from 1 through $grid_column {
    .#{$prefix}grid-#{$i} {
        grid-template-columns: repeat($i, 1fr);
        @extend %grid;
    }

    .#{$prefix}col-#{$i},
    .#{$prefix}grid-#{$i},
    .#{$prefix}grid-#{$i} > %heading,
    .#{$prefix}grid-#{$i} > .#{$prefix}row {
        grid-column-end: span $i;
    }

    .#{$prefix}col-#{$i} {
        @extend %col;
    }

    .#{$prefix}span-#{$i} {
        grid-column-start: $i;
    }

    .#{$prefix}order-#{$i} {
        order: $i;
    }
}

// Breakpoints
@for $i from $grid_column to 0 {
    @media only screen and (max-width: getBreakpoint($i)) {
        @include pasteBuffer($i);

        // Shrink
        @if $i < $grid_column {
            $k: $i + 1;

            .#{$prefix}shrink {
                &,
                > %grid-#{$k} {
                    grid-template-columns: repeat($i, 1fr);
                }

                > %heading,
                > %col-#{$k},
                > .#{$prefix}grid-#{$k} > %heading,
                > .#{$prefix}grid-#{$k} > .#{$prefix}row {
                    grid-column-end: span $i;
                }
            }

            @for $j from $k through $grid_column {
                .#{$prefix}grid-#{$j} {
                    @extend %grid-#{$k};
                }

                .#{$prefix}col-#{$j},
                .#{$prefix}grid-#{$j} {
                    @extend %col-#{$k};
                }
            }
        }

        // Actions
        %col-b#{$i} {
            display: initial;
        }

        .#{$prefix}col-b#{$i}-0 {
            display: none;
        }

        .#{$prefix}gap-b#{$i} {
            grid-gap: initial;
        }

        .#{$prefix}gap-b#{$i}-0 {
            grid-gap: 0;
        }

        @for $j from 1 through $grid_column {
            .#{$prefix}col-b#{$i}-#{$j} {
                grid-column-end: span $j;
                @extend %col-b#{$i};
            }

            .#{$prefix}order-b#{$i}-#{$j} {
                order: $j;
            }

            .#{$prefix}span-b#{$i}-#{$j} {
                grid-column-start: $j;
            }
        }
    }
}