@use 'sass:math';

$max-width: 1000px !default;
$gutter: 30px !default;

@mixin container($max-width: $max-width, $gutter: $gutter) {
  width: calc(100% - #{$gutter});
  max-width: $max-width;
  margin: 0 auto;
}

@mixin grid($direction: row, $count: 5, $gutter: $gutter) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: $direction;
  justify-content: flex-start;

  > * {
    @include cell($gutter: $gutter, $count: $count);
  }
}

@mixin cell($count: 5, $gutter: $gutter) {
  flex: 0 0 auto;
  width: calc(#{math.div(100%, $count)} - #{(($count - 1) * math.div($gutter, $count))});
  margin-right: $gutter;

  &:nth-child(#{$count}n) {
    margin-right: 0;
    margin-left: auto;
  }
}

@mixin simple-row() {
  display: flex;
  flex-wrap: wrap;
}

@mixin simple-cell($gutter: $gutter) {
  flex: 1 1 0px;
  margin-right: $gutter;
  &:last-child {
    margin-right: 0;
  }
}