// ---------------------------------------------------------------------------
// Imports

@import "../../../sass/ezy/grid";

/* -------------------------------------------------------------------- *
 * Static grid
 * -------------------------------------------------------------------- */

$column-width: 60px;
$gutter-width: 30px;
$total-columns: 3;
$is-fluid: false;

/* -------------------------------------------------------------------- *
 * Default gutter property
 */

.gutter-default-a-1 {
  @include span-columns( 1 );
}

.gutter-default-b-1 {
  @include span-columns( 2 );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: padding
 */

.gutter-padding-a-2 {
  @include span-columns( 1, $gutter-property: "padding" );
}

.gutter-padding-b-2 {
  @include span-columns( 2, $gutter-property: "padding" );
}

/* -------------------------------------------------------------------- *
 * Setting default gutter property to padding
 */

$gutter-property: "padding";

.gutter-default-a-3 {
  @include span-columns( 1 );
}

.gutter-default-b-3 {
  @include span-columns( 2 );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: margin
 */

.gutter-margin-a-4 {
  @include span-columns( 1, $gutter-property: "margin" );
}

.gutter-margin-b-4 {
  @include span-columns( 2, $gutter-property: "margin" );
}

/* -------------------------------------------------------------------- *
 * Trying again, using grid-init()
 * -------------------------------------------------------------------- */

$gutter-property: "margin";
@include grid-init();

/* -------------------------------------------------------------------- *
 * Default gutter property after grid-init()
 */

.gutter-default-a-5 {
  @include span-columns( 1 );
}

.gutter-default-b-5 {
  @include span-columns( 2 );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: padding after grid-init()
 */

.gutter-padding-a-6 {
  @include span-columns( 1, $gutter-property: "padding" );
}

.gutter-padding-b-6 {
  @include span-columns( 2, $gutter-property: "padding" );
}

/* -------------------------------------------------------------------- *
 * Setting default gutter property to padding after grid-init()
 */

$gutter-property: "padding";

.gutter-default-a-7 {
  @include span-columns( 1 );
}

.gutter-default-b-7 {
  @include span-columns( 2 );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: margin after grid-init()
 */

.gutter-margin-a-8 {
  @include span-columns( 1, $gutter-property: "margin" );
}

.gutter-margin-b-8 {
  @include span-columns( 2, $gutter-property: "margin" );
}

/* -------------------------------------------------------------------- *
 * Again, now with a fluid grid
 * -------------------------------------------------------------------- */

$gutter-property: "margin";
$is-fluid: true;
$total-columns: 6; // resetting column count to create new set of placeholder selectors
@include grid-init();

/* -------------------------------------------------------------------- *
 * Default gutter property after grid-init()
 */

.gutter-default-a-9 {
  @include span-columns( 3, $total-columns );
}

.gutter-default-b-9 {
  @include span-columns( 6, $total-columns );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: padding after grid-init()
 */

.gutter-padding-a-10 {
  @include span-columns( 3, $total-columns, $gutter-property: "padding" );
}

.gutter-padding-b-10 {
  @include span-columns( 6, $total-columns, $gutter-property: "padding" );
}

/* -------------------------------------------------------------------- *
 * Setting default gutter property to padding after grid-init()
 */

$gutter-property: "padding";

.gutter-default-a-11 {
  @include span-columns( 3, $total-columns );
}

.gutter-default-b-11 {
  @include span-columns( 6, $total-columns );
}

/* -------------------------------------------------------------------- *
 * Forcing gutter property: margin after grid-init()
 */

.gutter-margin-a-12 {
  @include span-columns( 3, $total-columns, $gutter-property: "margin" );
}

.gutter-margin-b-12 {
  @include span-columns( 6, $total-columns, $gutter-property: "margin" );
}