@import "compass/utilities/general/float";
@import "compass/utilities/general/clearfix";
@import "shared";

// Direction of the float
$compass-float-direction: left !default;
// Set to 0 to disable gutters
$compass-gutter-width: 10px !default;
$compass-left-gutter-width: ceil($compass-gutter-width / 2) !default;
$compass-right-gutter-width: $compass-gutter-width - $compass-left-gutter-width !default;

// A floated element is generally assigned a width to achieve table-less alignment
@mixin floated($side : $compass-float-direction, 
               $left-gutter : $compass-left-gutter-width,
               $right-gutter : $compass-right-gutter-width) {
  @include float($side);
  @if $left-gutter > 0 {
    margin-left: $left-gutter;
  }
  @if $right-gutter > 0 {
    margin-right: $right-gutter;
  }
}

// Remove the gutter for a particular side of a floated element
// pass `both` to disable the gutter on both sides.
@mixin gutterless($side) {
  @if $side == both {
    margin-left: 0;
    margin-right: 0;
  } @else {
    margin-#{$side}: 0;
  }
}

// provides the base structure required to make an element pushable in
// the specified direction (which defaults to `right`).
@mixin pushable($side: opposite-position($compass-float-direction)) {
  @include float($side);
  position: relative;
}

// provides the base structure required to make an element pullable in
// the specified direction (which defaults to `left`).
@mixin pullable($side : $compass-float-direction) {
  @include float($side);
  position: relative;
}

// push an element in the specified direction by the specified amount.
@mixin pushed($side, $amount) {
  margin-#{$side}: -$amount;
  margin-#{opposite-position($side)}: $amount;
}

// pull an element in the specified directionn by the specified amount.
@mixin pulled($side, $amount) {
  margin-#{$side}: $amount;
}

// Take an element out of the float if it had been made floated already.
// This might be applied to an element to allow it to fill the remainder
// of a row, in which case you'll probably want to make that element also
// a float container.
@mixin sunken {
  float: none;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

@mixin act-like-blueprint {
  .clearfixed { @include pie-clearfix; }
  .column     { @include floated(left, 0, $compass-gutter-width); }
  .last       { @include gutterless(right); }
  .float-container { @extend .clearfixed; }
  .container  { @extend .float-container; @include centered; }
  .push       { @include pushable; }
  .pull       { @include pullable; }
}

@mixin act-like-960 {
  .clearfixed     { @include pie-clearfix; }
  .grid           { @include floated(left, $compass-gutter-left-width, $compass-gutter-right-width); }
  .alpha          { @include gutterless(left);  }
  .omega          { @include gutterless(right); }
  .container      { @extend .clearfixed;        }
  .grid-container { @extend .container; @include centered;  }
  .push           { @include pushable; }
  .pull           { @include pullable; }
}

@mixin act-like-oocss {
  .clearfixed { @include pie-clearfix; }
  .line       { @extend .clearfixed; }
  .unit       { @include floated(left, 0, 0); }
  .lastUnit   { @extend .clearfixed; @include sunken; }
  .size1of1   { @include sunken; }

  @for $divisions from 2 through 5 {
    @for $segment from 1 to $divisions {
      .size#{$segment}of#{$divisions} { width: percentage($segment / $divisions); }
    }
  }
}