// html-grid.scss v1.0 | @ajlkn | MIT licensed */

// Mixins.

/// Initializes the current element as an HTML grid. /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). @mixin html-grid($gutters: 1.5em, $suffix: '') {

// Initialize.
$cols: 12;
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
$unit: 100% / $cols;

// Suffixes.
$suffixes: null;

@if (type-of($suffix)=='list') {
  $suffixes: $suffix;
}

@else {
  $suffixes: ($suffix);
}

// Gutters.
$guttersCols: null;
$guttersRows: null;

@if (type-of($gutters)=='list') {

  $guttersCols: nth($gutters, 1);
  $guttersRows: nth($gutters, 2);

}

@else {

  $guttersCols: $gutters;
  $guttersRows: 0;

}

// Row.
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;

// Columns.
>* {
  box-sizing: border-box;
}

// Gutters.
&.gtr-uniform {
  >* {
    > :last-child {
      margin-bottom: 0;
    }
  }
}

// Alignment.
&.aln-left {
  justify-content: flex-start;
}

&.aln-center {
  justify-content: center;
}

&.aln-right {
  justify-content: flex-end;
}

&.aln-top {
  align-items: flex-start;
}

&.aln-middle {
  align-items: center;
}

&.aln-bottom {
  align-items: flex-end;
}

// Step through suffixes.
@each $suffix in $suffixes {

  // Suffix.
  @if ($suffix !='') {
    $suffix: '-'+ $suffix;
  }

  @else {
    $suffix: '';
  }

  // Row.

  // Important.
  >.imp#{$suffix} {
    order: -1;
  }

  // Columns, offsets.
  @for $i from 1 through $cols {
    >.col-#{$i}#{$suffix} {
      width: $unit * $i;
    }

    >.off-#{$i}#{$suffix} {
      margin-left: $unit * $i;
    }
  }

  // Step through multipliers.
  @each $multiplier in $multipliers {

    // Gutters.
    $class: null;

    @if ($multiplier !=1) {
      $class: '.gtr-'+ ($multiplier * 100);
    }

    &#{$class} {
      margin-top: ($guttersRows * $multiplier * -1);
      margin-left: ($guttersCols * $multiplier * -1);

      >* {
        padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
      }

      // Uniform.
      &.gtr-uniform {
        margin-top: $guttersCols * $multiplier * -1;

        >* {
          padding-top: $guttersCols * $multiplier;
        }
      }

    }

  }

}

}