@use "../../variables/index" as *;

/* generate classes for setting two columns on a 12 columns grid */

@mixin createGridCols($value) {
  @if $value >= 0 {
    $one: $value;
    $two: 12 - $value;

    .grid__col--#{$one}-#{$two} {
      grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr));
      &--xs {
        @media (max-width: $screen-xs-max) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr));
        }
      }
      &--sm {
        @media (min-width: $screen-sm-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr));
        }
      }
      &--md {
        @media (min-width: $screen-md-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr));
        }
      }
      &--lg {
        @media (min-width: $screen-lg-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr));
        }
      }
    }

    @include createGridCols(($value - 1));
  }
}

@mixin createGridCols3($value) {
  @if $value >= 0 {
    $one: $value;
    $two: 12 - ($value * 2);
    $three: $value;

    .grid__col--#{$one}-#{$two}-#{$three} {
      grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr)) minmax(0, ($three * 1fr));
      &--xs {
        @media (max-width: $screen-xs-max) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr)) minmax(0, ($three * 1fr));
        }
      }
      &--sm {
        @media (min-width: $screen-sm-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr)) minmax(0, ($three * 1fr));
        }
      }
      &--md {
        @media (min-width: $screen-md-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr)) minmax(0, ($three * 1fr));
        }
      }
      &--lg {
        @media (min-width: $screen-lg-min) {
          grid-template-columns: minmax(0, ($one * 1fr)) minmax(0, ($two * 1fr)) minmax(0, ($three * 1fr));
        }
      }
    }
    @include createGridCols3(($value - 1));
  }
}

/* generate classes for setting  two rows on a 12 rows grid
  example: grid__row-4-6
*/
@mixin createGridRows($value) {
  @if $value >= 0 {
    $one: $value;
    $two: 12 - $value;

    .grid__row--#{$one}-#{$two} {
      grid-template-rows: ($one * 1fr) ($two * 1fr);

      &--xs {
        @media (max-width: $screen-xs-max) {
          grid-template-rows: ($one * 1fr) ($two * 1fr);
        }
      }
      &--sm {
        @media (min-width: $screen-sm-min) {
          grid-template-rows: ($one * 1fr) ($two * 1fr);
        }
      }
      &--md {
        @media (min-width: $screen-md-min) {
          grid-template-rows: ($one * 1fr) ($two * 1fr);
        }
      }
      &--lg {
        @media (min-width: $screen-lg-min) {
          grid-template-rows: ($one * 1fr) ($two * 1fr);
        }
      }
    }

    @include createGridRows(($value - 1));
  }
}

@mixin createGapClasses($value, $basesize: 8) {
  @if $value >= 0 {
    $val: ($value * $basesize);
    .gap-#{$val} {
      gap: ($val * 1px) !important;
    }

    @media (max-width: $screen-xs-max) {
      .gap-xs-#{$val} {
        gap: ($val * 1px) !important;
      }
    }
    @media (min-width: $screen-sm-min) {
      .gap-sm-#{$val} {
        gap: ($val * 1px) !important;
      }
    }
    @media (min-width: $screen-md-min) {
      .gap-md-#{$val} {
        gap: ($val * 1px) !important;
      }
    }
    @media (min-width: $screen-lg-min) {
      .gap-lg-#{$val} {
        gap: ($val * 1px) !important;
      }
    }
    @include createGapClasses(($value - 1), $basesize);
  }
}