$column-width:  4em !default;
$gutter-width:  1em !default;
$total-columns: 12 !default;
$is-fluid:      true !default;

$grid-init: false;

$context-warn: "You must set $context if $is-fluid is set to true.";

@function layout-width( $columns ) {
  @if comparable( $column-width, $gutter-width ) {
    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
  } @else {
    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
  }
}

@function context-width( $columns ) {
  @return layout-width( $columns ) + $gutter-width;
}

@function span-column-width( $columns ) {
  @return layout-width( $columns );
}

@function gutter(
  $context: false
  ) {
  @if $is-fluid and $context {
    @return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
  } @else if $is-fluid {
    @warn $context-warn;
  } @else {
    @return $gutter-width / 2; 
  }
}

@mixin gutters( 
  $context: false
  ) {
  margin: {
    left: gutter( $context );
    right: gutter( $context );
  }
}

%ezy-master {
  @extend %clearfix;
  margin: {
    left: auto;
    right: auto;
  }
}

@mixin master(
  $columns
  ) {
  @if $is-fluid {
    max-width: layout-width( $columns );
  } @else {
    width: layout-width( $columns );
  }
  @extend %ezy-master;
}

%ezy-container {
  @extend %clearfix;
}

@mixin container(
  $context: false,
  $at-breakpoint: false
  ) {
  $pullout: -( $gutter-width )/2;
  @if $is-fluid and $context {
    $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
  } @else if $is-fluid {
    @warn $context-warn;
  }
  margin: {
    left: $pullout;
    right: $pullout;
  }
  @if (not $at-breakpoint) {
    @extend %ezy-container;
  }
}

@mixin grid-init() {
  $grid-init: true;
  @if $is-fluid {
    @for $i from 1 through $total-columns {
      %ezy-column-#{ $i } {
        float: left;
        @include gutters( $i );
      }
    }
  } @else {
    %ezy-column {
      float: left;
      @include gutters;
    }
  }
}

@mixin span-columns(
  $columns,
  $context: false,
  $at-breakpoint: false
  ) {
  $width: span-column-width( $columns );
  /* Spanning #{ $columns } of #{ $context } columns */
  @if $is-fluid and $context {
    $context-width: context-width( $context );
    $pct-width: percentage-round( $width / $context-width );
    width: $pct-width;
  } @else {
    width: $width;
  }
  @if $is-fluid {
    @if (not $at-breakpoint) {
      @if $total-columns < $context {
        @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
        @include gutters( $context );
      } @else if (not $grid-init) {
        @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
        @include gutters( $context );
      } @else {
        @extend %ezy-column-#{ $context };
      }
    } @else {
      @include gutters( $context );
    }
    @if $columns > $context {
      @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
    }
    @if (not $context) {
      @warn $context-warn;
    }
  } @else if (not $grid-init) {
    @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
    @include gutters( $context );
  } @else {
    @extend %ezy-column;
  }
}