// .selector {
//   @include float-col((
//     '>=desktop-small': 3,
//     '<=tablet-large': 6,
//   ), 12);
// }

@mixin -float-row-column ($rules, $total-columns) {
  display: block;
  float: left;
  width: 100%;
  @each $rule, $column-number in $rules {
    @include media($rule...) {
      @if ($row-columns-style == 'classic') {
        width: step($column-number, $total-columns);
        $nth-child: ($total-columns / $column-number) + 1;

        &:nth-child(#{$nth-child}n + #{$nth-child}) {
          clear: both;
        }
      } @else {
        width: 100% / $column-number;
        $nth-child: $column-number + 1;

        &:nth-child(#{$column-number}n + #{$nth-child}) {
          clear: both;
        }
      }
    }
  }
}

@mixin float-row ($rules: null, $total-columns: $row-columns-total) {
  clear: both;
  display: block;
  width: auto;

  &::after {
    clear: both;
    content: '';
    display: block;
    height: 1px;
    margin-top: -1px;
    width: 100%;
  }

  @if $rules != null {
    @if $-bem-block-name != '' {
      @if $-bem-element-name == '' {
        @include element ($row-columns-name) {
          @include -float-row-column($rules, $total-columns);
          @content;
        }
      } @else {
        @at-root #{$-bem-block-name}#{$-bem-element-name}-#{$row-columns-name} {
          @include -float-row-column($rules, $total-columns);
          @content;
        }
      }

    } @else {
      .#{$row-columns-name} {
        @include -float-row-column($rules, $total-columns);
        @content;
      }
    }
  }
}

@mixin float-col($rules: null, $total-columns: $row-columns-total) {
  display: block;
  float: left;
  @each $rule, $column-number in $rules {
    @include media($rule) {
      width: step($column-number, $total-columns);
    }
  }
}

@mixin float-col-offset($rules: null, $total-columns: $row-columns-total) {
  @each $rule, $column-number in $rules {
    @include media($rule) {
      margin-left: step($column-number, $total-columns);
    }
  }
}