@use "sass:map";
@use "sass:math";

//
// Floated list
//

.list-blocks {
    margin-left: -$grid-gutter-half;
    margin-right: -$grid-gutter-half;
    padding: 0;

    @include clearfix;

    > li,
    > .list-block {
        width: 100%;
        display: block;
        float: left;
        padding-left: $grid-gutter-half;
        padding-right: $grid-gutter-half;
    }

    @for $i from 1 through $grid-columns {
        &.list-blocks-#{$i} {
            > li,
            > .list-block {
                width: math.percentage(1 / $i);

                &:nth-child(#{$i}n+1) {
                    clear: left;
                }
            }
        }
    }

    @each $breakpoint in map.keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            @for $i from 1 through math.ceil($grid-columns / 2) {
                &.list-blocks#{$infix}-#{$i} {
                    > li,
                    > .list-block {
                        width: math.percentage(1 / $i);

                        &:nth-child(n) {
                            /* Reset for responsive list layouts */
                            clear: none;
                        }

                        &:nth-child(#{$i}n+1) {
                            clear: left;
                        }
                    }
                }
            }
        }
    }
}