// Global Box Sizing Syntax
// ========================

@include test-module('Global Box-Sizing Syntax') {

  // [mixin] global-box-sizing
  // -------------------------
  @include output-test('global-box-sizing') {
    // sets box-sizing on all elements
    @include assert-setup {
      .nest {
        @include pad(15%);
        width: 60%;
        margin: 0 auto;
      }
    }
    @include assert-output(
      'Nested items should use border-box model.'
    ) {
      .test { @include global-box-sizing(border-box); }
      .expect {
        *, *:before, *:after { @include output((box-sizing: border-box)); }
      }
    }

    // $inherit set to true:
    // sets box-sizing on html element
    // all other elements inherit from their parent
    @include assert-setup {
      .nest {
        @include pad(15%);
        width: 60%;
        margin: 0 auto;
      }
    }
    @include assert-output(
      'Nested items should inherit the border-box model from the html element.'
    ) {
      .test { @include global-box-sizing(border-box, true); }
      .expect {
        @at-root {
          html { @include output((box-sizing: border-box)); }
          *, *:before, *:after { box-sizing: inherit; }
        }
      }
    }
  }

  // [mixin] border-box-sizing
  // -------------------------
  @include output-test('border-box-sizing') {
    // sets box-sizing to border-box on all elements
    @include assert-setup {
      .nest {
        @include pad(15%);
        width: 60%;
        margin: 0 auto;
      }
    }
    @include assert-output(
      'Nested items should use border-box model.'
    ) {
      .test { @include border-box-sizing; }
      .expect {
        *, *:before, *:after { @include output((box-sizing: border-box)); }
      }
    }

    // $inherit set to true:
    // sets box-sizing to border-box on html element
    // all other elements will inherit box-sizing of border-box
    @include assert-setup {
      .nest {
        @include pad(15%);
        width: 60%;
        margin: 0 auto;
      }
    }
    @include assert-output(
      'Nested items should inherit the border-box model from the html element.'
    ) {
      .test { @include border-box-sizing(true); }
      .expect {
        @at-root {
          html { @include output((box-sizing: border-box)); }
          *, *:before, *:after { box-sizing: inherit; }
        }
      }
    }
  }

  // [mixin] update-box-model
  // ------------------------
  @include test('update-box-model') {
    $original: susy-get(global-box-sizing);
    $new: border-box;

    @include assert-unequal($original, $new,
      'Box models are different before we test.');

    @include update-box-model($new);

    $test: susy-get(global-box-sizing);
    @include assert-equal($test, $new,
      'Changes the global-box-sizing.');

    @include original-grid;
  }

}
