// ------------------------------------------------------------------- //
//  Grid Settings
// ------------------------------------------------------------------- //

$max-width: 960px !default;
$grid-columns: 12 !default;
$grid-gutter: 15px !default;
$column: $max-width / $grid-columns !default;

// ------------------------------------------------------------------- //
//  Set Container
// ------------------------------------------------------------------- //

@mixin outer-container {
  @include clearfix;
  max-width: $max-width;
  width: 100%;
  margin: 0 auto;
}

// ------------------------------------------------------------------- //
//  Set Full Width Row
// ------------------------------------------------------------------- //

@mixin row{
  @include clearfix;
  position: relative;
  display: block;
  margin: 0 -#{$grid-gutter};
}

// ------------------------------------------------------------------- //
//  Set Widths
// ------------------------------------------------------------------- //

@mixin span-columns($col-size, $flow: left) {

  $col-width: percentage($col-size / $grid-columns);

  @if $col-size > $grid-columns {
    @warn "Column size should not be greater than max-columns (#{$grid-columns}).";
  }

  @else {

    @if $flow == left {
      float: left;
      width: $col-width;
      padding: 0 $grid-gutter;
    }

    @if $flow == "right"{
      float: right;
      width: $col-width;
      padding: 0 $grid-gutter;
    }

    @else if $flow == "center" {
      float: none;
      width: $col-width;
      margin: 0 auto;
      padding: 0 $grid-gutter;
    }
  }
}

// ------------------------------------------------------------------- //
//  Shift
// ------------------------------------------------------------------- //

@mixin shift($col-shift) {
  $shift: percentage($col-shift / 12);

  @if $col-shift > 12 {
    @warn "Should not shift greater than max-columns (12).";
  }

  @else {
    margin-left: $shift;
  }
}

// ------------------------------------------------------------------- //
//  Hug
// ------------------------------------------------------------------- //

@mixin hug($direction){

  @if $direction == "left" {
    padding-left: 0;
  }

  @else if $direction == "right" {
    padding-right: 0;
  }

  @else if $direction == "both" {
    padding: 0;
  }

  @else {
    @warn "Hug requires 'left', 'right', or 'both'. Please choose a valid direction.";
  }
}