@use '../_styles/mixin.scss' as *;

@mixin __inject_var($width, $padding, $gutter, $columns) {
  --grid-padding: #{$padding};
  --grid-layout-width: #{$width};
  --grid-column-gutter: #{$gutter};
  --grid-column-total: #{$columns};
  --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
  --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
}

:root {
  --grid-1: var(--grid-column-width);
  --layout-content-width: var(--grid-full);
  @media (min-width: 1921px) {
    @include __inject_var(1920px, 64px, 32px, 24);
  }
  @media (min-width: 1681px) {
    @include __inject_var(100vw, 64px, 32px, 24);
  }
  @media (min-width: 1441px) and (max-width: 1680px) {
    @include __inject_var(100vw, 64px, 32px, 24);
  }
  @include respond('laptop') {
    @include __inject_var(100vw, 40px, 24px, 24);
  }
  @include respond('>pad') {
    @for $i from 2 through 24 {
      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
    }
  }
  @include respond('pad_h') {
    @include __inject_var(100vw, 32px, 16px, 12);
    @for $i from 2 through 12 {
      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
    }
    @for $i from 13 through 24 {
      --grid-#{$i}: var(--grid-full);
    }
  }
  @include respond('pad_v') {
    @include __inject_var(100vw, 32px, 16px, 8);
    @for $i from 2 through 8 {
      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
    }
    @for $i from 9 through 24 {
      --grid-#{$i}: var(--grid-full);
    }
  }
  @media (max-width: 600px) {
    @include __inject_var(100vw, 24px, 12px, 4);
    @for $i from 2 through 4 {
      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
    }
    @for $i from 5 through 24 {
      --grid-#{$i}: var(--grid-full);
    }
  }
}