@import '../scss/vars';

// map functions
@function breakpoint($breakpoint) {
  @if map-has-key($grid-breakpoints, $breakpoint) {
    @return map-get($grid-breakpoints, $breakpoint);
  } @else {
    @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
  }
}

@function gutter($breakpoint) {
  @if map-has-key($gutter-breakpoints, $breakpoint) {
    @return map-get($gutter-breakpoints, $breakpoint);
  } @else {
    @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
  }
}

@function grid-gutter($breakpoint) {
  @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
    @return map-get($grid-gutter-breakpoints, $breakpoint);
  } @else {
    @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
  }
}

$max-width: 1600px;
$columns: 12;

$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px);
$gutter-breakpoints: (xs: 5px, sm: 10px);
$grid-gutter-breakpoints: (xs: 3%, sm: 5%);

.#{$prefix}--grid {
  margin-left: grid-gutter('xs');
  margin-right: grid-gutter('xs');
  padding-left: gutter('xs');
  padding-right: gutter('xs');

  @media (min-width: breakpoint('sm')) {
    margin-left: grid-gutter('sm');
    margin-right: grid-gutter('sm');
    padding-left: gutter('sm');
    padding-right: gutter('sm');
  }

  &.max {
    max-width: $max-width;
  }
}

.#{$prefix}--row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 gutter('xs') * -1;

  @media (min-width: breakpoint('sm')) {
    margin: 0 gutter('sm') * -1;
  }
}

[class*='#{$prefix}--col'] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding: 0 gutter('xs');

  @media (min-width: breakpoint('sm')) {
    padding: 0 gutter('sm');
  }
}

@for $i from 1 through $columns {
  .#{$prefix}--col-xs-#{$i} {
    flex-basis: (100% * $i / $columns);
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @media (min-width: breakpoint($breakpoint)) {
    .#{$prefix}--col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
    }

    @for $i from 1 through $columns {
      .#{$prefix}--col-#{$breakpoint}-#{$i} {
        flex-basis: (100% * $i / $columns);
      }
    }
  }
}

// deprecated
$gutter-size: 10px;

@mixin column-size($col-num) {
  flex-basis: (100% * $col-num / $columns);
  max-width: (100% * $col-num / $columns);
}

.#{$prefix}--col-xs,
.#{$prefix}--col-sm,
.#{$prefix}--col-md,
.#{$prefix}--col-lg {
  flex-basis: 0;
  flex: 1;
  flex-grow: 1;
  max-width: 100%;
}