/**
* Mixins to build grid system.
*/

:root {
  --grid-column-number: #{$column-number-mobile};
  --column-gutter: #{$column-gutter-mobile};

  @include media-up(md) {
    --grid-column-number: #{$column-number-tablet};
    --column-gutter: #{$column-gutter-desktop};
  }

  @include media-up(lg) {
    --grid-column-number: #{$column-number-desktop};
    --column-gutter: #{$column-gutter-desktop};
  }
}

/**
* Use to wrap.
*/
@mixin grid-container {
  width: 100%;
  max-width: $max-container-width;
  padding-right: $grid-gutter-mobile;
  padding-left: $grid-gutter-mobile;
  margin: 0 auto;

  @include media-up(lg) {
    padding-right: $grid-gutter-desktop;
    padding-left: $grid-gutter-desktop;
  }
}

/**
* Use to wrap colmuns.
*/
@mixin grid-column-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: $column-gutter-mobile;
  width: 100%;

  @include media-up(md) {
    column-gap: $column-gutter-desktop;
  }
}

/**
  * Grid column mixin.
  * Pass the number of columns and the maximum grid columns
  * $grid-column-number default: $column-number-desktop / $column-number-mobile
  *
  * Ex. @include grid-column(6) (set 6 columns of 12)
  * Ex. @include grid-column(6, 10) (set 6 columns of 10)
*/
@mixin grid-column($column-number, $grid-column-number: false) {
  @if $grid-column-number {
    --grid-column-number: #{$grid-column-number} !important;
  }

  $gap-number: calc(var(--grid-column-number) - #{$column-number});

  width: calc(
    (100% * #{$column-number} / var(--grid-column-number)) - calc(
        #{$gap-number} * var(--column-gutter) / var(--grid-column-number)
      )
  );
}

@mixin grid-offset-left($column-number, $grid-column-number: false) {
  @if $grid-column-number {
    --grid-column-number: #{$grid-column-number} !important;
  }

  $gap-number: calc(var(--grid-column-number) - #{$column-number});

  margin-left: calc(
    (100% * #{$column-number} / var(--grid-column-number)) - calc(
        #{$gap-number} * var(--column-gutter) / var(--grid-column-number)
      ) + var(--column-gutter)
  );
}

@mixin grid-offset-right($column-number, $grid-column-number: false) {
  @if $grid-column-number {
    --grid-column-number: #{$grid-column-number} !important;
  }

  $gap-number: calc(var(--grid-column-number) - #{$column-number});

  margin-right: calc(
    (100% * #{$column-number} / var(--grid-column-number)) - calc(
        #{$gap-number} * var(--column-gutter) / var(--grid-column-number)
      ) + var(--column-gutter)
  );
}