@charset 'UTF-8';

////
/// Flavor SCSS Grid-system Columns
/// @group grid-system-columns
/// @author blackmirror1980
////

@mixin columns-sizes($columns: $columns-default, $gutter: $gutter-default, $key: '') {
  // Columns Sizes
  // --------------------------------------------------
  @for $i from 0 through $columns {
    @if $i==0 {
      .col-#{$key}-push-0 {
        @include left(auto);
      }

      .col-#{$key}-pull-0 {
        @include right(auto);
      }
    }
    @else {
      $col-percentage: ceil(percentage($i / $columns) * 10000) / 10000;

      .col-#{$key}-#{$i} {
        @include box-size($col-percentage, false);
      }

      .col-#{$key}-push-#{$i} {
        @include left($col-percentage);
      }

      .col-#{$key}-pull-#{$i} {
        @include right($col-percentage);
      }

      .col-#{$key}-offset-#{$i} {
        @include margin-left($col-percentage);
      }
    }
  }
}

@mixin columns-breakpoints($columns: $columns-default, $gutter: $gutter-default, $first-breakpoint: $first-breakpoint-default, $breakpoints: $breakpoints-default) {
  // Columns Breakpoints
  // --------------------------------------------------
  @each $key, $breakpoint in $breakpoints {
    $min-viewport-width: get($breakpoint, 'min-viewport-width');

    @if is-defined($min-viewport-width) {
      $min-viewport-width: px($min-viewport-width);
    }

    @if $breakpoint==$first-breakpoint {
      @include columns-sizes($columns, $gutter, $key);
    }
    @else {
      @include media($media-type: screen, $min-width: $min-viewport-width) {
        @include columns-sizes($columns, $gutter, $key);
      }
    }
  }
}

/// Columns mixin
///
/// @access public
/// @param {integer} $columns [$columns-default] - the columns number
/// @param {size | length} $gutter [$gutter-default] - the gutter value
@mixin columns($columns: $columns-default, $gutter: $gutter-default, $first-breakpoint: $first-breakpoint-default, $breakpoints: $breakpoints-default) {
  @if is-integer($columns) and is-length($gutter) {
    // Columns
    // --------------------------------------------------
    // Common styles for small and large grid columns
    $padding: ($gutter / 2);

    [class*='col-'] {
      @include position(relative);
      @include display(inline-block, true);
      @include padding(null $padding);
      @include content-align(left top);
      @include box-bounds(null 1px); // Prevent columns from collapsing when empty

      > .row {
        @include reset-inline-block;
      }
    }

    @include columns-breakpoints($columns, $gutter, $first-breakpoint, $breakpoints);
  }
  @else {
    @error 'columns: #{$columns}, gutter: #{$gutter} are not valid options for the grid-system columns mixin';
  }
}