////
/// Grid Group Annotations
/// @group grid
////

/// Set grid column width
///
/// @param {Number} $size - Column size between 0 and `$grid-columns`
/// @param {Number} $columns [$grid-columns] - Number of columns in the grid (Default to `$grid-columns` = 12)
///
/// @require {variable} $grid-columns
///
/// @example scss - Set column width to 50%
///   .foo {
///     @include grid-col(6);
///   }
@mixin grid-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  width: percentage($size / $columns);
  max-width: percentage($size / $columns);
}

/// Set grid offset
///
/// @param {Number} $size - Column size between 0 and `$grid-columns`
/// @param {Number} $columns [$grid-columns] - Number of columns in the grid (Default to `$grid-columns` = 12)
///
/// @require {variable} $grid-columns
///
/// @example scss - Set column offset to 2 columns
///   .foo {
///     @include grid-col-offset(2);
///   }
@mixin grid-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

/// Generate grid sized columns classes for specific media query
///
/// @param {String | null} $size [null] - Media query size from `$grid-gutter-width`
/// @param {Number} $columns [$grid-columns] - Number of columns in the grid (Default to `$grid-columns` = 12)
///
/// @require {variable} $grid-gutter-width
/// @require {variable} $grid-columns
///
/// @example scss - Generate xs columns
///   @include grid-generator(xs);
@mixin grid-generator($size: null, $columns: $grid-columns) {
  @for $i from 1 through $grid-columns {
    @if $size == null {
      .#{$prefix}-col-#{$i} {
        @include grid-col($i);
      }
    }
    @else {
      .#{$prefix}-col-#{$size}-#{$i} {
        @include grid-col($i);
      }
    }
  }
}

/// Generate grid offset for specific media query
///
/// @param {String | null} $size [null] - Media query size from `$grid-gutter-width`
/// @param {Number} $columns [$grid-columns] - Number of columns in the grid (Default to `$grid-columns` = 12)
///
/// @require {variable} $grid-gutter-width
/// @require {variable} $grid-columns
///
/// @example scss - Generate xs offsets
///   @include grid-offset-generator(xs);
@mixin grid-offset-generator($size: null, $columns: $grid-columns) {
  @for $i from 1 through $grid-columns {
    @if $size == null {
      .#{$prefix}-col-offset-#{$i} {
        @include grid-col-offset($i);
      }
    }
    @else {
      .#{$prefix}-col-offset-#{$size}-#{$i} {
        @include grid-col-offset($i);
      }
    }
  }
}

@mixin container() {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-right: map-get($grid-gutter-width, xs);
  padding-left: map-get($grid-gutter-width, xs);

  @include respond-from(sm) {
    padding-right: map-get($grid-gutter-width, lg);
    padding-left: map-get($grid-gutter-width, lg);
  }

  @include respond-from(xl) {
    max-width: $container-max-width;
    padding-right: 0;
    padding-left: 0;
  }
}