@use "sass:math";

$col-padding: calculateRem(10) !default;
$col-margin-top: calculateRem(8) !default;
$col-margin-bottom: calculateRem(8) !default;
$max-cols: 12 !default;
$col-percentage: math.div(100, $max-cols);

$grid-sizes: 'one-quarter' 25%, 'half' 50%, 'three-quarters' 75%, 'one-third' 33.333333%, 'two-thirds' 66.666666%, 'full' 100%, 'one-fifth' 20%, 'two-fifths' 40%, 'three-fifths' 60%, 'four-fifths' 80% !default;

@function calcColWidth($size) {
  @return $col-percentage * $size * 1%;
}

@mixin column-size($size, $max-size, $width, $screen)  {
  .column.is#{$screen}-#{$size} {
    --width: #{$width};
    flex: none;
  }

  @if($size != $max-size) {
    .column.is-offset#{$screen}-#{$size} {
      margin-left: $width;
    }
  }
}

.grid {
  --col-padding: #{$col-padding};
  --col-margin-top: #{$col-margin-top};
  --col-margin-bottom: #{$col-margin-bottom};
  --col-width: 100%;

  .column {
    --margin: var(--col-margin-top) 0 var(--col-margin-bottom) 0;
    --padding: var(--col-padding);
    --width: var(--col-width);
  }

  display: flex;
  flex-flow: row wrap;

  &.has-centered {
    &.is-vertical {
      align-items: center;
    }
  }

  &.has-spacing {
    justify-content: space-between;
  }

  &.has-row-margin {
    .column {
      margin: var(--margin);
    }
  }

  &.is-vertical {
    flex-direction: column;
  }

  &.is-flex-start {
    align-items: flex-start;
  }

  .column {
    flex: none;
    padding: var(--padding);
    width: var(--width);

    &.is-mobile-auto {
      flex: 1;
    }

    @include medium {
      flex: 1;
    }

    @include large {
      &.is-desktop-auto {
        flex: 1 !important;
      }
    }

    @include extra-large {
      &.is-desktop-x-auto {
        flex: 1 !important;
      }
    }

    &.is-end {
      margin-left: auto;
    }

    &.is-center {
      margin: 0 auto;
    }
  }

  &.has-no-col-padding > .column {
    padding: 0;
  }

  @include medium {
    .column.is-shrink {
      flex: none;
      width: auto;
    }
    @each $size in $grid-sizes {
      @include column-size(nth($size, 1), 'full', nth($size, 2), '');
    }
    @for $i from 1 through $max-cols {
      @include column-size($i, $max-cols, calcColWidth($i), '');
    }
  }

  @include small {
    .column.is-mobile-shrink {
      width: auto;
    }
    @each $size in $grid-sizes {
      @include column-size(nth($size, 1), 'full', nth($size, 2), '-mobile');
    }
    @for $i from 1 through $max-cols {
      @include column-size($i, $max-cols, calcColWidth($i), '-mobile');
    }
  }

  @include large {
    .column.is-desktop-shrink {
      flex: none;
      width: auto;
    }
    @each $size in $grid-sizes {
      @include column-size(nth($size, 1), 'full', nth($size, 2), '-desktop');
    }
    @for $i from 1 through $max-cols {
      @include column-size($i, $max-cols, calcColWidth($i), '-desktop');
    }
  }

  @include extra-large {
    .column.is-desktop-x-shrink {
      flex: none;
      width: auto;
    }
    @each $size in $grid-sizes {
      @include column-size(nth($size, 1), 'full', nth($size, 2), '-desktop-x');
    }
    @for $i from 1 through $max-cols {
      @include column-size($i, $max-cols, calcColWidth($i), '-desktop-x');
    }
  }

}