@use 'sass:math';
$simple-flex-max-elements: 12 !default;

.ls-simple-grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;

  &--spacings-sm {
    margin: 0 - $sp;

    > .ls-simple-grid-item {
      padding: 0 $sp;
    }

  }

  &--spacings-md {
    margin: 0 -2 * $sp;
    padding: 0;

    > .ls-simple-grid-item {
      padding: 0 2 * $sp;
    }

  }

  &--spacings-lg {
    margin: 0 -4 * $sp;
    padding: 0;

    > .ls-simple-grid-item {
      padding: 0 4 * $sp;
    }

  }

  .ls-simple-grid-item {
    width: 100%;
  }

  @for $i from 1 through $simple-flex-max-elements {
    &--elements-xs-#{$i} {

      .ls-simple-grid-item {
        width: math.percentage(math.div(1, $i));
      }
    }
  }

  $breakpoints: sm, md, lg, xl;
  @each $breakpoint in $breakpoints {
    @for $i from 1 through $simple-flex-max-elements {
      &--elements-#{$breakpoint}-#{$i} {

        .ls-simple-grid-item {
          @include breakpoint($breakpoint) {
            width: math.percentage(math.div(1, $i));
          }
        }
      }
    }
  }
}