@import "compass/utilities";

//  How many grid columns would you like?
$grid-columns: 12 !default;

//  How many pixels wide would you like each column to be?
$grid-pixels: 60px !default;

//  How many pixels wide would you like the gutter to be?
$grid-gutter-width: 20px !default;

//  Set grid width
$grid-width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width;

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

// Used internatlly to the extension only
@mixin column {
  @include float-left;
  margin: 0 $grid-gutter-width / 2;
  overflow: hidden; }

// Used internatlly to the extension only
@mixin grid-width($grid-columns) {
  @if $grid-columns == 1 {
    width: $grid-pixels; }
  @else {
    width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }

// Mixins used to create, define and manipulate the grid
@mixin grid-container {
  margin: 0 auto;
  overflow: hidden;
  width: $grid-width; }

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

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

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

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