@import "compass/utilities";

// Configure grid coordinates
$grid-columns: 12 !default;
$grid-width: 60px !default;
$grid-gutter-width: 20px !default;
$overflow-allowed: true !default;

@mixin grid-coordinates {
  .grid-container {
    @include grid-container; }
  .nested-grid-container {
    @include nested-grid-container; }
  .grid-block {
    @include grid-block; }
  @for $i from 1 through $grid-columns {
    .grid-#{$i} {
      @include grid($i); } }
  .grid-full {
    @include grid-full; }
  @for $i from 1 through $grid-columns - 1 {
    .grid-prefix-#{$i} {
      @include grid-prefix($i); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-suffix-#{$i} {
      @include grid-suffix($i); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-push-#{$i} {
      @include grid-push($i); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-pull-#{$i} {
      @include grid-pull($i); } } }

@mixin overflow-allowed($boolean: $overflow-allowed) {
  @if $boolean {
    @include pie-clearfix; }
  @else {
    @include clearfix; } }

@mixin grid-container {
  @include overflow-allowed;
  margin: 0 auto;
  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }

@mixin nested-grid-container {
  @include overflow-allowed;
  display: inline-block;
  margin: {
    left: -$grid-gutter-width / 2;
    right: -$grid-gutter-width / 2; };
  width: auto; }

@mixin grid-block {
  @include float-left;
  @include overflow-allowed;
  margin: 0 $grid-gutter-width / 2; }

@mixin grid($grid-columns) {
  position: relative;
  @include grid-width($grid-columns);
  @include grid-block; }

@mixin grid-full {
  @include grid($grid-columns); }

@mixin grid-width($grid-columns) {
  @if $grid-columns == 1 {
    width: $grid-width; }
  @else {
    width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }

@mixin grid-prefix($grid-columns) {
  @if $grid-columns == 1 {
    padding-left: $grid-width + $grid-gutter-width; }
  @else {
    padding-left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; } }

@mixin grid-suffix($grid-columns) {
  @if $grid-columns == 1 {
    padding-right: $grid-width + $grid-gutter-width; }
  @else {
    padding-right: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; } }

@mixin grid-push($grid-columns) {
  @if $grid-columns == 1 {
    left: $grid-width + $grid-gutter-width; }
  @else {
    left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; } }

@mixin grid-pull($grid-columns) {
  @if $grid-columns == 1 {
    left: -$grid-width + $grid-gutter-width; }
  @else {
    left: -$grid-columns * $grid-width + $grid-columns * $grid-gutter-width; } }