// // AG tests
// // ========

@import "../../sass/susy";


// Complex AG tests
// ----------------

@mixin ag-test(
  $class
) {
  .#{$class} {
    @include container;
    margin-bottom: .5rem;
    margin-top: .5rem;

    > .size1of5 {
      min-height: 10rem;
      &:first-of-type { @include span(2 at 1); }
      ~ .size1of5 { @include span(last 2); }
    }
    > .size3of5 {
      @include span(6 at 3 nest);
      > .size1of2 {
        &:first-child { @include span(3 at 1 of nested(6 at 3)); }
        + .size1of2 { @include span(last 3 of nested(6 at 3)); }
      }
      > .full {
        @include full(nest);
        background: none;
      }
    }

    .full {
      @include nested(6 at 3) {
        .size1of3 {
          @include span(first 2);
          min-height: 6.5rem;
        }
        .size2of3 {
          @include span(4 omega nest);
        }
      }
    }

    .size2of3 {
      .size1of2 {
        @include nested(4 at 5) {
          &:first-child { @include span(2 alpha); }
          + .size1of2 { @include span(last 2); }
        }
      }
      .full {
        @include full(of nested(4 at 5));
      }
    }

    .gallery {
      div {
        @include gallery(2);
      }
    }
  }
}

// Symmetrical
// -----------

@include with-layout(10 (4em 1em) before show overlay) {
  @include ag-test(symmetrical);
}

// Asymmetrical
// ------------

@include with-layout(80% (.5 2 1.25 1 3.25 1.75 3 2 1 3.75) .5 isolate left show-columns overlay) {
  @include ag-test(asymmetrical);
}

// Static
// ------

@include with-layout(10 (60px 20px) static show) {
  @include ag-test(static);
}

// Split Gutters
// -------------

@include with-layout(60em (1 .5 1 3 1 .5 1 .5 1 4) .25 split show) {
  @include ag-test(split);
}

// Inside Gutters
// --------------

@include with-layout(60em (1 .5 1 3 1 .5 1 .5 1 4) .25 inside right show) {
  @include ag-test(inside);
}

// Inside Static
// -------------

@include with-layout(10 (6em 2em) inside-static show) {
  @include ag-test(inside-static);
}

// Styles
// ------

html {
  font-size: 16px;
  line-height: 1rem;
}

body {
  font-size: .75rem;
  font-family: sans-serif;
}

h1 {
  background: #333;
  color: #eee;
}

h1, h2, h3 {
  clear: both;
  font-size: .75rem;
  font-weight: bold;
  line-height: 1rem;
  margin: 0;
  padding: .5rem;
}

.grid-element {
  margin-bottom: .5rem;
  min-height: 3rem;
  opacity: .5;
}

.size1of2 { background: #f99; }
.size1of5 { background: #aef; }
.size1of3 { background: orange; }
.full.grid-element { background: pink; }

.gallery {
  @include susy-clearfix;
  clear: both;

  div {
    background: rgba(red,.25);
    height: 1rem;
    margin-bottom: .5rem;
    outline: 1px dotted red;
  }
}
