@use "../util" as *;
@use "../globals" as *;

@mixin grid {
  display: grid;
}

.grid {
  @include grid();
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

//   .grid.grid-col-1{
//     $cols: 1;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

//   .grid.grid-col-2{
//     $cols: 2;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-3{
//     $cols: 3;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-4{
//     $cols: 4;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-5{
//     $cols: 5;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-6{
//     $cols: 6;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-7{
//     $cols: 7;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-8{
//     $cols: 8;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-9{
//     $cols: 9;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-10{
//     $cols: 10;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-11{
//     $cols: 11;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

// .grid.grid-col-12{
//     $cols: 12;
//     @include grid();
//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
// }

$gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");

@each $colCount in $gridcol {
  .grid-col-#{$colCount} {
    grid-template-columns: repeat(
      auto-fit,
      minmax(max(250px, 100% / (#{$colCount} + 1) + 1px), 1fr)
    );
  }
}

$colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");

@include breakpoint(xl) {
  @each $spanCount in $colspan {
    .col-span-#{$spanCount} {
      grid-column: auto / span #{$spanCount};
    }
  }
}
