/// Lego Grid.
///
/// @group grid
///
/// @example scss - usage
///
///   @include k-LegoGrid;
///
/// @example html
///
///   <div className="k-LegoGrid">
///     <div className="k-LegoGrid__item">…</div>
///     <div className="k-LegoGrid__item">…</div>
///     …
///   </div>

@mixin k-LegoGrid {
  .k-LegoGrid {
    @include k-grid;
    display: block;
  }

  .k-LegoGrid__item {
    @include k-grid-colSize(12, $flexible: false);

    @include k-media-min('s') {
      @include k-grid-colSize(6, $flexible: false);
    }

    @include k-media-min('l') {
      @include k-grid-colSize(4, $flexible: false);
    }
  }

  @each $name, $query in $k-media-queries {
    @include k-LegoGridCols($name);
  }

  .k-LegoGrid__item__content {
    margin: 0 k-px-to-rem(10px) k-px-to-rem(20px);
  }
}

@mixin k-LegoGridCols($media) {
  $number-of-columns: k-map-fetch($k-grid, 'columns');

  @for $columns from 1 through $number-of-columns {
    .k-LegoGrid--#{$columns}col\@#{$media} {
      .k-LegoGrid__item {
        @include k-media-min($media) {
          @include k-grid-colSize($columns, $flexible: false);
        }
      }
    }
  }
}