@use 'sass:math'

=clearfix()
  &:before,
  &:after
    content: " "
    display: table

  &:after
    clear: both

=make-grid-columns($i: 1, $list: ".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")
  @for $i from (1 + 1) through $grid-columns
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"
  #{$list}
    position: relative
    display: block
    min-height: 1px
    box-sizing: border-box
    flex: 0 0 100%

    @if $i == "xs"
      padding-left: math.div($grid-gutter, 4)
      padding-right: math.div($grid-gutter, 4)
    @else
      padding-left: math.div($grid-gutter, 2)
      padding-right: math.div($grid-gutter, 2)

    img
      max-width: 100%
      height: auto

=float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}")
  @for $i from (1 + 1) through $grid-columns
    $list: "#{$list}, .col-#{$class}-#{$i}"

  #{$list}
    float: left

=calc-grid-column($index, $class, $type)
  @if ($type == width) and ($index > 0)
    .col-#{$class}-#{$index}
      width: percentage(math.div($index, $grid-columns))
      flex: 0 0 percentage(math.div($index, $grid-columns))

  @if ($type == offset)
    .col-#{$class}-o#{$index}
      margin-left: percentage(math.div($index, $grid-columns))

=loop-grid-columns($columns, $class, $type)
  @for $i from 0 through $columns
    +calc-grid-column($i, $class, $type)

// Create grid for specific class
=make-grid($class)
  +float-grid-columns($class)
  +loop-grid-columns($grid-columns, $class, width)
  +loop-grid-columns($grid-columns, $class, offset)

.container
  max-width: ($grid-column * $grid-columns + $grid-gutter * $grid-columns)
  margin: auto
  padding-left: math.div($grid-gutter, 2)
  padding-right: math.div($grid-gutter, 2)
  box-sizing: border-box

  @media (max-width: $screen-sm-max)
    padding-left: 16px
    padding-right: 16px
    max-width: 100%

.row
  margin-left: math.div($grid-gutter, -4)
  margin-right: math.div($grid-gutter, -4)
  +clearfix()

  @media (min-width: $screen-xs-min)
    margin-left: math.div($grid-gutter, -2)
    margin-right: math.div($grid-gutter, -2)

.row-flex
  display: flex
  flex-direction: row

  .col-sb
    display: flex
    flex-direction: column
    justify-content: space-between

+make-grid-columns(xs)
+make-grid(xs)

@media (min-width: $screen-xs-min)
  +make-grid-columns(sm)
  +make-grid(sm)

@media (min-width: $screen-sm-min)
  +make-grid(md)

@media (min-width: $screen-md-min)
  +make-grid(lg)
