@mixin generate-column-rules($n) {
  flex: 0 0 percentage($n / $petals--grid-columns);
  float: left;
  display: block;
  width: percentage($n / $petals--grid-columns);
}

@mixin generate-columns($size: "") {
  @if $size == "" {
    &--hidden,
    &--xs-hidden {
      display: none;
    }
  }

  @else {
    &--#{$size}-hidden {
      display: none;
    }
  }

  @for $i from 1 through $petals--grid-columns {
    @if $size == "" {
      &--#{$i},
      &--xs-#{$i} {
        @include generate-column-rules($i);
      }

      &--offset-#{$i} {
        margin-left: percentage($i / $petals--grid-columns);
      }
    }

    @else {
      &--#{$size}-#{$i} {
        @include generate-column-rules($i);
      }
    }
  }
}

@include component-rules($petals--grid-column-component-name) {
  @include generate-columns();

  @each $pt, $px in $petals--grid-breakpoints {
    @media (min-width: $px) {
      @include generate-columns($pt);
    }
  }
}

@include component-rules($petals--grid-row-component-name) {
  &:not(&--flex) {
    @include pie-clearfix;
  }

  &--flex {
    display: flex;
    flex-flow: row nowrap;

    #{get-selector($petals--grid-column-component-name)} {
      flex: 0 0 auto;
    }
  }
}