@import "singularitygs";

$break: 700px;
$break2: 900px;
$break3: 1200px;

$grids: add-grid(2);
$grids: add-grid(2 8 2 1 at $break);
$grids: add-grid(12 at $break2);
$grids: add-grid(1 3 5 7 9 at $break3);
$gutters: add-gutter(1/3);
// $gutters: add-gutter(.25 at $break);
$output: 'float';

body {
  margin: 0;
  padding: 0;
  @include background-grid;
}

div {
  height: 50px;
}

#foo {
  background: red;
  height: 30px;
  @include grid-span(1, 2);

  @include breakpoint($break) {
    @include grid-span(1, 4);
    clear: none;
  }

  @include breakpoint($break2) {
    @include grid-span(2, 11);
  }

  @include breakpoint($break3) {
    @include grid-span(1, 3);
    @include push(2, 1);
  }
}

#bar {
  background: green;
  height: 20px;
  @include grid-span(1, 1);
  clear: left;

  @include breakpoint($break) {
    @include grid-span(2, 2);
    @include push(1, 1);
    clear: none;
  }

  @include breakpoint($break2) {
    @include grid-span(8, 3);
    clear: none;
  }

  @include breakpoint($break3) {
    @include grid-span(1, 1);
    @include pull(3, 1);
  }

}

#baz {
  background: purple;
  @include grid-span(1, 1);

  @include breakpoint($break) {
    // This piece's position is very wonky in Float, and as such we need to do some custom silliness to place it. It winds up looking similar to Isolation positioning, but in revers. Fortunately, because we have functions like column-span, gutter-span, and grid-span, we're able to build this fairly easily and have the heavy lifting of the math done for us.
    width: column-span(1, 1);
    float: right;
    margin-left: -100%;
    margin-right: grid-span(2, 2) + gutter-span();
    clear: none;
  }

  @include breakpoint($break2) {
    margin-right: 0;
    @include grid-span(2, 1);
    @include pull(10, 1);
    clear: none;
  }

  @include breakpoint($break3) {
    @include grid-span(1, 5);
  }
}

#qux {
  background: yellow;
  @include grid-span(1, 1);
  clear: both;

  @include breakpoint($break) {
    @include grid-span(3, 2);
    // clear: left;
  }

  @include breakpoint($break2) {
    @include grid-span(3, 4);
    clear: both;
    @include push(3, 1);
  }

  @include breakpoint($break3) {
    @include grid-span(1, 2);
    clear: none;
    @include pull(2, 2);
  }
}

#waldo {
  background: blue;
  height: 70px;

  @include grid-span(1, 2);

  @include breakpoint($break) {
    @include grid-span(1, 1);
    clear: left;
  }

  @include breakpoint($break2) {
    @include grid-span(3, 1);
    @include pull(6, 1);
  }

  @include breakpoint($break3) {
    @include grid-span(1, 4);
    clear: none;
    margin-right: -100%;
    margin-left: 0;
  }
}

#garfield {
  background: orange;

  @include grid-span(2, 1);

  @include breakpoint($break) {
    @include float-span(4, 1);
  }

  @include breakpoint($break2) {
    @include grid-span(5, 8);
  }

  @include breakpoint($break3) {
    @include grid-span(2, 3);
    clear: both;
    @include push(2, 1);
  }
}