/*
  @function colspan

  Returns a calc() that represents a column span

  Parameters:
  $number-of-columns - the number of columns you want to span
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number
  $inverse - if you want to return a negative number (to move things backwards)

  NB: only works with breakpoint names, not the +/- variants
*/
@function colspan($number-of-columns:1, $breakpoint:'xsmall', $bump:0px, $inverse:false) {
  @if map-has-key($breakpoints-with-directions, $breakpoint) {
    $this-bp-main-col-width: map-get($main-col-widths, $breakpoint);
    $this-bp-inner-gutter: map-get($inner-gutters, $breakpoint);
    $this-bp-outer-gutter: map-get($outer-gutters, $breakpoint);
    $this-bp-total-cols: map-get($column-count, $breakpoint);

    @if ($number-of-columns >= $this-bp-total-cols) {
      @if ($this-bp-main-col-width == 'fluid') {
        @return calc(100vw - #{2 * $this-bp-outer-gutter});
      } @else {
        @return $this-bp-main-col-width;
      }
    } @else {

      @if ($this-bp-main-col-width == 'fluid') {
        $this-calc: '((100vw - #{(($this-bp-total-cols - 1) * $this-bp-inner-gutter) + (2 * $this-bp-outer-gutter)}) / #{$this-bp-total-cols}) * #{$number-of-columns}';

        @if ($number-of-columns >= 1) {
          $this-calc: '(#{$this-calc}) + #{($number-of-columns - 1) * $this-bp-inner-gutter}';
        }

        @if($bump != 0px) {
          $this-calc: '(#{$this-calc}) + #{$bump}';
        }

        @if($inverse) {
          $this-calc: '(#{$this-calc}) * -1';
        }

        @return calc(#{$this-calc});

      } @else {
        $this-multiplier: 1;
        @if($inverse) {
          $this-multiplier: -1;
        }

        @return #{((((($this-bp-main-col-width - ($this-bp-total-cols - 1) * $this-bp-inner-gutter) / $this-bp-total-cols) * $number-of-columns) + ($number-of-columns - 1) * $this-bp-inner-gutter) + $bump) * $this-multiplier};
      }

    }
  }
}

/*
  @mixin width

  Returns a width and a calc() to correctly span columns
  with breakpoint selection and optional bump value

  Parameters:
  $number-of-columns - the number of columns you want to span
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number

  NB: only works with breakpoint names, not the +/- variants
*/

@mixin width($number-of-columns:1, $breakpoint:'xsmall', $bump:0px) {
  width: colspan($number-of-columns, $breakpoint, $bump);
}

/*
  @mixin width-multi

  A mix of @mixin width and @mixin column. Pass a map of the number
  of columns to span at each breakpoint. Use when you don't need to
  float on the grid.

  Parameters:
  $colspans - scss map detailing how many design columns this column
  needs to span on each breakpoint. Omitting a breakpoint from the
  map will not set a width at that breakpoint.
  $bump - if you want the colspan + an arbitrary number

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include width-multi($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/

@mixin width-multi($colspans:false, $bump:0px) {
  @if $colspans {
    @each $name, $point in $breakpoints {
      $colspan: map-get($colspans, #{$name});

      @if $colspan {
        @include breakpoint('#{$name}') {
          @include width($colspan, #{$name}, $bump);
        }
      }
    }
  }
}

/*
  @mixin push

  Returns a margin-left and a calc() to correctly push
  a block a number of columns with breakpoint selection
  and optional bump value

  Parameters:
  $number-of-columns - the number of columns you want to push
  $breakpoint - at which breakpoint
  $bump - if you want the colspan + an arbitrary number

  NB: only works with breakpoint names, not the +/- variants
*/
@mixin push($number-of-columns:1, $breakpoint:'xsmall', $bump:0px, $in-container:false) {
  @if map-has-key($breakpoints-with-directions, $breakpoint){
    @if($in-container){
      $bump: $bump + (map-get($inner-gutters, $breakpoint) * 2);
    } @else {
      $bump: $bump + map-get($inner-gutters, $breakpoint);
    }
  }
  margin-left: colspan($number-of-columns, $breakpoint, $bump);
}

/*
  @mixin push-multi

  A mix of @mixin push and @mixin column. Pass a map of the number
  of columns to push at each breakpoint.

  Parameters:
  $colspans - scss map detailing how many design columns this column
  needs to push on each breakpoint. Omitting a breakpoint from the
  map will not set a width at that breakpoint.
  $bump - if you want the colspan + an arbitrary number

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include push-multi($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/

@mixin push-multi($colspans:false, $bump:0px) {
  @if $colspans {
    @each $name, $point in $breakpoints {
      $colspan: map-get($colspans, #{$name});

      @if $colspan {
        @include breakpoint('#{$name}') {
          @include push($colspan, #{$name}, $bump);
        }
      }
    }
  }
}

/*
  @mixin push-gutter

  Adds gutter margin to the sides passed to the set breakpoints.
  Defaults to left margin across all breakpoints.

  Parameters:
  $sides - the sides you'd like to apply margin to
  $bps - at which breakpoints

  NB: only works with breakpoint names, not the +/- variants
*/
@mixin push-gutter($sides:(left), $bps: $breakpoints) {
  @each $name, $point in $bps {
    @include breakpoint('#{$name}') {
      @each $dir in $sides {
        margin-#{$dir}: map-get($inner-gutters, $name);
      }
    }
  }
}

/*
  @mixin columns-container

  Sets up columns container

  Parameters:
  none

  ```scss
    .list-articles {
    @include columns-container;
  }
  ```
*/
@mixin columns-container() {
  @include float-clear();

  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      margin-left: - map-get($inner-gutters, $name);
    }
  }
}

/*
  @mixin column

  Sets up single column

  Parameters:
  $colspans - scss map detailing how many design columns this column needs to span on each breakpoint

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include column($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/
@mixin column($colspans:false) {
  float: left;

  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      @if $colspans {
        $colspan: map-get($colspans, #{$name});
        @if $colspan {
          width: colspan($colspan, #{$name});
        }
      }
      margin-left: (map-get($inner-gutters, #{$name}));
    }
  }
}

/*
  @mixin columns-container-flex

  Sets up columns container - flex version

  Parameters:
  none

  ```scss
  .list-articles {
    @include columns-container-flex;
  }
  ```
*/

@mixin columns-container-flex() {
  display: flex;
  flex-flow: row wrap;

  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      margin-left: (map-get($inner-gutters, $name)/-1);
    }
  }
}

/*
  @mixin column-flex

  Sets up single column

  Parameters:
  $colspans - scss map detailing how many design columns this column needs to span on each breakpoint

  ```scss
  $column-spans__list-articles: (
    xsmall: 3,
    small: 3,
    medium: 4,
    large: 4,
    xlarge: 3,
    xxlarge: 3
  );

  .list-articles__item {
    @include column-flex($column-spans__list-articles);
  }
  ```

  NB: only works with breakpoint names, not the +/- variants
*/

@mixin column-flex($colspans:false) {
  flex: 0 0 auto;
  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      @if $colspans {
        $colspan: map-get($colspans, #{$name});
        @if $colspan {
          width: colspan($colspan, #{$name});
        }
      }
      margin-left: map-get($inner-gutters, $name);
    }
  }
}