/// Column inside a flexible grid container.
///
/// @group grid
///
/// @parameter {Number} $columns - the number of columns to span
///
/// @example scss - Usage
///
///   .k-MyComponent {
///     @include k-grid;
///   }
///   .k-MyComponent__child {
///     @include k-grid-col(6); // span 6 columns
///   }

@mixin k-grid-col($columns) {
  @include k-grid-colBase;
  @include k-grid-colSize($columns);
}

@mixin k-grid-colBase {
  $gutter-width: k-map-fetch($k-grid, 'gutter-width');

  box-sizing: border-box;
  flex: 0 0 auto;
  padding-right: ($gutter-width/2);
  padding-left: ($gutter-width/2);
}

@mixin k-grid-colSize($columns, $flexible: true) {
  $number-of-columns: k-map-fetch($k-grid, 'columns');
  $width: (100% / $number-of-columns) * $columns;

  @if $flexible {
    flex-basis: $width;
    max-width: $width;
  }
  @else {
    width: $width;
  }
}