// Gallery Syntax
// ==============

@include test-module('Gallery Syntax') {

  // gallery
  // -------

  @include output-test('gallery') {
    // sym
    @include assert-setup('sym', $grid: 6 .8) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 3x symmetrical isolated gallery.'
    ) {
      .test { @include gallery(2); }
      .expect {
        width: 28.0%;
        float: left;
        &:nth-child(3n + 1) {
          margin-right: -100%;
          margin-left: 0;
          clear: left;
        }
        &:nth-child(3n + 2) {
          margin-left: 36%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(3n + 3) {
          margin-left: 72%;
          margin-right: -100%;
          clear: none;
        }
      }
    }

    // inside
    @include assert-setup('inside', $grid: 8 .25 inside) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 4x isolated gallery with inside-gutters.'
    ) {
      .test { @include gallery(2); }
      .expect {
        @include output((box-sizing: border-box));
        width: 25.0%;
        float: left;
        padding-left: 1.25%;
        padding-right: 1.25%;
        &:nth-child(4n + 1) {
          margin-right: -100%;
          margin-left: 0;
          clear: left;
        }
        &:nth-child(4n + 2) {
          margin-left: 25%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(4n + 3) {
          margin-left: 50%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(4n + 4) {
          margin-left: 75%;
          margin-right: -100%;
          clear: none;
        }
      }
    }

    // inside-static
    @include assert-setup('inside-static', $grid: 100% 6 (5em 4em) inside-static) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 3x isolated gallery with inside-static gutters.'
    ) {
      .test { @include gallery(2); }
      .expect {
        @include output((box-sizing: border-box));
        width: 33.33333%;
        float: left;
        padding-left: 2em;
        padding-right: 2em;
        &:nth-child(3n + 1) {
          margin-right: -100%;
          margin-left: 0;
          clear: left;
        }
        &:nth-child(3n + 2) {
          margin-left: 33.33333%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(3n + 3) {
          margin-left: 66.66667%;
          margin-right: -100%;
          clear: none;
        }
      }
    }

    // split
    @include assert-setup('split', $grid: 8 .25 split) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 4x isolated gallery with split-gutters.'
    ) {
      .test { @include gallery(2); }
      .expect {
        width: 22.5%;
        float: left;
        &:nth-child(4n + 1) {
          margin-right: -100%;
          margin-left: 1.25%;
          clear: left;
        }
        &:nth-child(4n + 2) {
          margin-left: 26.25%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(4n + 3) {
          margin-left: 51.25%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(4n + 4) {
          margin-left: 76.25%;
          margin-right: -100%;
          clear: none;
        }
      }
    }

    // asymmetrical
    @include assert-setup('asym', $grid: (1 2 1 2 2 1) 1/5) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 3x isolated asymmetrical gallery.'
    ) {
      .test { @include gallery(2); }
      .expect {
        float: left;
        &:nth-child(3n + 1) {
          width: 32%;
          margin-right: -100%;
          margin-left: 0;
          clear: left;
        }
        &:nth-child(3n + 2) {
          width: 32%;
          margin-left: 34%;
          margin-right: -100%;
          clear: none;
        }
        &:nth-child(3n + 3) {
          width: 32%;
          margin-left: 68%;
          margin-right: -100%;
          clear: none;
        }
      }
    }

    // asymmetrical inside
    @include assert-setup('asym-inside', $grid: (1 2 4 1) .5 inside) {
      .nest { @include susy-clearfix; }
      .test, .expect { margin-bottom: 0; }
    }
    @include assert-output(
      'Items should create 2x isolated asymmetrical gallery, with inside gutters.'
    ) {
      .test { @include gallery(2); }
      .expect {
        @include output((box-sizing: border-box));
        float: left;
        padding-left: 2.5%;
        padding-right: 2.5%;
        &:nth-child(2n + 1) {
          width: 40%;
          margin-left: 0;
          margin-right: -100%;
          clear: left;
        }
        &:nth-child(2n + 2) {
          width: 60%;
          margin-left: 40%;
          margin-right: -100%;
          clear: none;
        }
      }
    }
  }

}
