.row {
  position: relative;

  // Included pie-clearfix
  *zoom: 1;
  clear: both;
  &:after {
    content: "";
    display: table;
    clear: both
  }
}

.col {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  overflow: hidden;
  position: relative;
}

@function column-width($columns, $column) {
  @return (100% / $columns) * $column;
}

@mixin grid($layout, $columns, $spacing, $options:false) {
  .row {
    padding: $spacing;
  }

  .col {
    padding: $spacing;
  }

  // .m-2, .xl-6, etc
  @for $i from 0 through $columns {
    .#{$layout}-#{$i} {
      width: column-width($columns, $i);
    }
  }

  @each $option in $options {
    // .m-prefix-2, .xl-prefix-4, etc
    @if($option == prefix) {
      @for $i from 0 through $columns {
        .#{$layout}-prefix-#{$i} {
          margin-left: column-width($columns, $i);
        }
      }
    }

    // .m-suffix-2, .xl-suffix-4, etc
    @if($option == suffix) {
      @for $i from 0 through $columns {
        .#{$layout}-suffix-#{$i} {
          margin-right: column-width($columns, $i);
        }
      }
    }
  }
}

@mixin properties($spacing, $properties, $scale:false) {
  @each $property in $properties {

    // .margin, .padding, etc
    @if($scale == false) {
      .#{$property} {
        #{$property}: $spacing;
      }
    }

    // .margin-double, .padding-double, etc
    @if($scale == double) {
      .#{$property}-double {
        #{$property}: ($spacing * 2);
      }
    }

    // .margin-half, .padding-half, etc
    @if($scale == half) {
      .#{$property}-half {
        #{$property}: ($spacing / 2);
      }
    }

    // .margin-triple, .padding-triple, etc
    @if($scale == triple) {
      .#{$property}-triple {
        #{$property}: ($spacing * 3);
      }
    }
  }
}

@mixin properties-for-layout($layout, $spacing, $properties, $scale:false) {
  @each $property in $properties {

    // .s-margin, .s-padding, etc
    @if($scale == false) {
      .#{$layout}-#{$property} {
        #{$property}: $spacing;
      }
    }

    // .s-margin-double, .s-padding-double, etc
    @if($scale == double) {
      .#{$layout}-#{$property}-double {
        #{$property}: ($spacing * 2);
      }
    }

    // .s-margin-half, .s-padding-half, etc
    @if($scale == half) {
      .#{$layout}-#{$property}-half {
        #{$property}: ($spacing / 2);
      }
    }

    // .s-margin-triple, .s-padding-triple, etc
    @if($scale == triple) {
      .#{$layout}-#{$property}-triple {
        #{$property}: ($spacing * 3);
      }
    }
  }
}

@mixin reset-properties($properties) {
  @each $property in $properties {
    // .reset-margin, .reset-padding, etc
    .reset-#{$property} {
      #{$property}: 0 !important;
    }
  }
}

@mixin reset-properties-for-layout($layout, $properties) {
  @each $property in $properties {
    // .s-reset-margin, .s-reset-padding, etc
    .#{$layout}-reset-#{$property} {
      #{$property}: 0 !important;
    }
  }
}