//Grid

// @compass dependencies
@import "compass/css3";

//
//@variables
//

//Grid settings
$number-of-columns: 12 !default;
$offset-columns: $number-of-columns !default;
$column-separation-factor: 0.1833 !default;

//Row config
$row-text-rendering: optimizespeed !default;
$row-next-to-row-separation: 0.14285714rem !default;

//Columns settings
$col-top-padding: 8px !default;
$col-right-padding: 8px !default;
$col-bottom-padding: 8px !default;
$col-left-padding: 0 !default;
$col-padding: $col-top-padding $col-right-padding $col-bottom-padding $col-left-padding !default;

//Stack columns
$stack-column-separation: 2px !default;
$stack-column-padding-right: 0 !default;
$stack-column-padding-left: 0 !default;

//Media
$grid-max-width: 768px !default;

//Row variations
$grid-primary-background-color: rgba(52, 152, 219, 0.8) !default;
$grid-danger-background-color: rgba(231, 76, 60, 0.8) !default;
$grid-warning-background-color: rgba(241, 196, 15, 0.8) !default;
$grid-success-background-color: rgba(46, 204, 113, 0.8) !default;

//columns border
$col-border-color: #FFF !default;
$col-border-alpha: 0.5 !default;

//
//@mixin
//
@mixin grid-columns($columns: $number-of-columns) {
  $column-width: 100 / $columns;

  @for $i from 1 through $columns {
    .col-#{$i} {
      width: percentage(($column-width * $i) / 100);
    }
  }
}

//
//@mixin
//
@mixin grid-columns-offset($columns: $offset-columns) {
  $column-width: 100 / $columns;

  @for $i from 1 through $columns {
    .offset-#{$i} {
      margin-left: percentage(($column-width * $i) / 100);
    }
  }

}

.row {
  @extend %clearfix;
  display: block;
  text-rendering: $row-text-rendering;

  &.primary,
  [class*="col-"].primary { 
    background: $grid-primary-background-color; 
  }

  &.danger,
  [class*="col-"].danger { 
    background: $grid-danger-background-color; 
  }

  &.warning,
  [class*="col-"].warning { 
    background: $grid-warning-background-color; 
  }

  &.success,
  [class*="col-"].success { 
    background: $grid-success-background-color; 
  }

  //Columns
  @include grid-columns;
  @include grid-columns-offset;
}

//Separation between rows
.row + .row {
  margin-top: $row-next-to-row-separation;
}

//Borders and paddings are applied inside the div element
//This prevents the columns to stack by a border or padding
[class*="col-"] {
  padding: $col-padding;
  float: left;

  &.border {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;

    &.left {
     border-left-color: rgba($col-border-color, $col-border-alpha);
    }

    &.right {
     border-right-color: rgba($col-border-color, $col-border-alpha);
    }

    &.top {
     border-top-color: rgba($col-border-color, $col-border-alpha);
    }

    &.bottom {
     border-bottom-color: rgba($col-border-color, $col-border-alpha);
    }
  }

  [class*="col-"] {
    padding-left: 0; 
  }

  &.nopaddingleft {
    padding-left: 0; 
  }

  &.nopaddingtop {
    padding-top: 0; 
  }

  &.nopaddingright {
    padding-right: 0; 
  }

  &.nopaddingbottom {
    padding-bottom: 0; 
  }
}

@include max-screen($grid-max-width) {
  [class*="col-"] {
    &.border {

      &.left {
        border-top-color: rgba($col-border-color, $col-border-alpha);
        border-left-color: transparent;
      }

      &.right {
        border-bottom-color: rgba($col-border-color, $col-border-alpha);
        border-right-color: transparent;
      }
    }
  }
  .row > [class*="col-"] {
    width: 100%;
    margin-left: 0;
    margin-bottom: $stack-column-separation;
    padding-right: $stack-column-padding-right;
    padding-left: $stack-column-padding-left;
  }

  [class*="offset-"] {
    margin-left: 0; 
  }
}