@use 'sass:math';

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

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

@mixin cell($cells, $gutter: $global-gutter, $span: 1) {
  flex: 0 0 0px;
  flex-basis: calc(#{math.div($span, $cells) * 100%} - #{$gutter});
}

@mixin simple-row($gutter: $global-gutter) {
  display: flex;
  flex-wrap: wrap;
  > .full {
    width: 100%;
  }
  > .cell {
    flex: 1 1 0px;
    margin-right: $gutter;
    &:last-child {
      margin-right: 0;
    }
  }
}

@mixin row($cells: false) {
  display: flex;
  justify-content: space-around;
  flex-direction: row;

  @if $cells {
    > .cell {
      @include cell($cells: $cells);
    }
  }
}

@mixin nested-row($cells: false, $gutter: $global-gutter) {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width: 100%;
  margin: 0 math.div(-$gutter, 2);

  @if $cells {
    > .cell {
      @include cell($cells: $cells);
    }
  }
}

@mixin column() {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}