@import "mixins/all";
@import "compass/utilities/general/clearfix";

$bottom-gutter: lines(0.5);

/**
  Given `prefix`, `gutter` and `cols`, the mixin creates
  a grid system
*/
@mixin create-fluid-grid($prefix, $gutter, $cols) {
  $col-width: percentage(1 / $cols);

  @for $i from 1 through $cols {
    .#{$prefix}-#{$i} {
      width: 100%;
      margin-bottom: lines(0.5);

      &:last-child {
        margin-bottom: 0;
      }

      // Set min-height 1px, so that the element will be rendered, even though it's empty.
      // This reduces load time flickering.
      // (There might be some cleaner way to do this.)
      min-height: 1px;

      @include media(tablet) {
        width: $col-width * $i;
        float: left;
        padding-left: $gutter;
        padding-right: $gutter;
        margin-bottom: 0;
      }
    }
  }

  @include media(tablet) {
    [class*=col-]:first-child {
      padding-left: 0;
    }

    [class*=col-]:last-child {
      padding-right: 0;
    }
  }
}

.row {
  @include pie-clearfix;
  margin-bottom: $bottom-gutter;

  &.without-margin {
    margin-bottom: 0;
  }
}

.row-with-divider {
  @extend .row;
  border-bottom: 1px solid $border;
}

/**
  Creates a basic grid system, prefixed "col"

  Usage:
  .row
    .col-6
      = "I'm half the size available"
    .col-3
      = "I'm 1/4 of the total available size"
    .col-3
      = "I'm 1/4 of the total available size"
*/
@include create-fluid-grid("col", lines(0.5), 12);