@import "compass/utilities";

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

@mixin grid-coordinates {
  @if $overflow {
    .grid-pie-clearfix {
      @include pie-clearfix; } }
  @else {
    .grid-clearfix {
      @include clearfix; } }
  .grid-container {
    @include grid-container-base;
    @if $overflow {
      @extend .grid-pie-clearfix; }
    @else {
      @extend .grid-clearfix; } }
  .nested-grid-container {
    @include nested-grid-container-base;
    @if $overflow {
      @extend .grid-pie-clearfix; }
    @else {
      @extend .grid-clearfix; } }
  .grid-block {
    @include grid-block-base;
    @if $overflow {
      @extend .grid-pie-clearfix; }
    @else {
      @extend .grid-clearfix; } }
  .grid-full {
    @include grid-base($grid-columns);
    @extend .grid-block; }
  // Loops
  @for $i from 1 through $grid-columns {
    .grid-#{$i} {
      @include grid-base($i);
      @extend .grid-block; } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-prefix-#{$i} {
      @include grid-prefix($i); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-prefix-margin-#{$i} {
      @include grid-prefix($i, margin); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-suffix-#{$i} {
      @include grid-suffix($i); } }
  @for $i from 1 through $grid-columns - 1 {
    .grid-suffix-margin-#{$i} {
      @include grid-suffix($i, margin); } }
  @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 {
  @if $overflow {
    @include pie-clearfix; }
  @else {
    @include clearfix; } }

// Grid Container
@mixin grid-container-base {
  margin: 0 auto;
  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }

@mixin grid-container {
  @include overflow;
  @include grid-container-base; }

// Nested Container
@mixin nested-grid-container-base {
  display: inline-block;
  margin: {
    left: -($grid-gutter-width / 2);
    right: -($grid-gutter-width / 2); };
  width: auto; }

@mixin nested-grid-container {
  @include overflow;
  @include nested-grid-container-base; }

// Grid Block
@mixin grid-block-base {
  @include float-left;
  position: relative;
  margin: 0 $grid-gutter-width / 2; }

@mixin grid-block {
  @include grid-block-base;
  @include overflow; }

// Grid
@mixin grid-base($grid-columns) {
  @include grid-width($grid-columns); }

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

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

// Grid logic
@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, $type: "padding") {
  @if $type == "padding" {
    padding-left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
  @else {
    margin-left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width + $grid-gutter-width / 2; } }

@mixin grid-suffix($grid-columns, $type: "padding") {
  @if $type == "padding" {
    padding-right: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
  @else {
    margin-right: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width + $grid-gutter-width / 2; } }

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

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