/* stylelint-disable at-rule-no-unknown -- SDS Grids is using postcss Atrule */
$mq-x-small: 320px;
$mq-small: 480px;
$mq-medium: 768px;
$mq-large: 1024px;
$mq-x-large: 1280px;

@define-mixin responsive-width $i, $column, $breakpoint {
  [size~='$(i)\:$(column)\@$(breakpoint)'] {
    flex: 0 0 calc(($(i) / $(column)) * 100%);
    min-width: calc(($(i) / $(column)) * 100%);
  }
}

@media (min-width: $mq-x-small) {
  /* 2 Columns */
  @for $i from 1 to 2 {
    @mixin responsive-width $i, 2, x-small;
  }

  /* 3 Columns */
  @for $i from 1 to 3 {
    @mixin responsive-width $i, 3, x-small;
  }

  /* 4 Columns */
  @for $i from 1 to 4 {
    @mixin responsive-width $i, 4, x-small;
  }

  /* 5 Columns */
  @for $i from 1 to 5 {
    @mixin responsive-width $i, 5, x-small;
  }

  /* 6 Columns */
  @for $i from 1 to 6 {
    @mixin responsive-width $i, 6, x-small;
  }

  /* 7 Columns */
  @for $i from 1 to 7 {
    @mixin responsive-width $i, 7, x-small;
  }

  /* 8 Columns */
  @for $i from 1 to 8 {
    @mixin responsive-width $i, 8, x-small;
  }

  /* 12 Columns */
  @for $i from 1 to 12 {
    @mixin responsive-width $i, 12, x-small;
  }
}

@media (min-width: $mq-small) {
  /* 2 Columns */
  @for $i from 1 to 2 {
    @mixin responsive-width $i, 2, small;
  }

  /* 3 Columns */
  @for $i from 1 to 3 {
    @mixin responsive-width $i, 3, small;
  }

  /* 4 Columns */
  @for $i from 1 to 4 {
    @mixin responsive-width $i, 4, small;
  }

  /* 5 Columns */
  @for $i from 1 to 5 {
    @mixin responsive-width $i, 5, small;
  }

  /* 6 Columns */
  @for $i from 1 to 6 {
    @mixin responsive-width $i, 6, small;
  }

  /* 7 Columns */
  @for $i from 1 to 7 {
    @mixin responsive-width $i, 7, small;
  }

  /* 8 Columns */
  @for $i from 1 to 8 {
    @mixin responsive-width $i, 8, small;
  }

  /* 12 Columns */
  @for $i from 1 to 12 {
    @mixin responsive-width $i, 12, small;
  }
}

@media (min-width: $mq-medium) {
  /* 2 Columns */
  @for $i from 1 to 2 {
    @mixin responsive-width $i, 2, medium;
  }

  /* 3 Columns */
  @for $i from 1 to 3 {
    @mixin responsive-width $i, 3, medium;
  }

  /* 4 Columns */
  @for $i from 1 to 4 {
    @mixin responsive-width $i, 4, medium;
  }

  /* 5 Columns */
  @for $i from 1 to 5 {
    @mixin responsive-width $i, 5, medium;
  }

  /* 6 Columns */
  @for $i from 1 to 6 {
    @mixin responsive-width $i, 6, medium;
  }

  /* 7 Columns */
  @for $i from 1 to 7 {
    @mixin responsive-width $i, 7, medium;
  }

  /* 8 Columns */
  @for $i from 1 to 8 {
    @mixin responsive-width $i, 8, medium;
  }

  /* 12 Columns */
  @for $i from 1 to 12 {
    @mixin responsive-width $i, 12, medium;
  }
}

@media (min-width: $mq-large) {
  /* 2 Columns */
  @for $i from 1 to 2 {
    @mixin responsive-width $i, 2, large;
  }

  /* 3 Columns */
  @for $i from 1 to 3 {
    @mixin responsive-width $i, 3, large;
  }

  /* 4 Columns */
  @for $i from 1 to 4 {
    @mixin responsive-width $i, 4, large;
  }

  /* 5 Columns */
  @for $i from 1 to 5 {
    @mixin responsive-width $i, 5, large;
  }

  /* 6 Columns */
  @for $i from 1 to 6 {
    @mixin responsive-width $i, 6, large;
  }

  /* 7 Columns */
  @for $i from 1 to 7 {
    @mixin responsive-width $i, 7, large;
  }

  /* 8 Columns */
  @for $i from 1 to 8 {
    @mixin responsive-width $i, 8, large;
  }

  /* 12 Columns */
  @for $i from 1 to 12 {
    @mixin responsive-width $i, 12, large;
  }
}

@media (min-width: $mq-x-large) {
  /* 2 Columns */
  @for $i from 1 to 2 {
    @mixin responsive-width $i, 2, x-large;
  }

  /* 3 Columns */
  @for $i from 1 to 3 {
    @mixin responsive-width $i, 3, x-large;
  }

  /* 4 Columns */
  @for $i from 1 to 4 {
    @mixin responsive-width $i, 4, x-large;
  }

  /* 5 Columns */
  @for $i from 1 to 5 {
    @mixin responsive-width $i, 5, x-large;
  }

  /* 6 Columns */
  @for $i from 1 to 6 {
    @mixin responsive-width $i, 6, x-large;
  }

  /* 7 Columns */
  @for $i from 1 to 7 {
    @mixin responsive-width $i, 7, x-large;
  }

  /* 8 Columns */
  @for $i from 1 to 8 {
    @mixin responsive-width $i, 8, x-large;
  }

  /* 12 Columns */
  @for $i from 1 to 12 {
    @mixin responsive-width $i, 12, x-large;
  }
}
/* stylelint-enable at-rule-no-unknown -- SDS Grids is using postcss Atrule */