// ⚡️ Flash Grid
// Infos/Dokumentation hier: https://github.com/CodyHouse/flashgrid

$grid-columns: 12 !default;

.grid,
[class*="grid-auto-"] {
  display: grid;
  grid-gap: var(--grid-gap, 0);
}

.grid {
  --grid-cols: #{$grid-columns};
  grid-template-columns: repeat(var(--grid-cols), 1fr);

  > * {
    grid-column: span var(--span, #{$grid-columns}) / span
      var(--span, #{$grid-columns});
  }
}

.grid-auto-xs,
.grid-auto-sm,
.grid-auto-md,
.grid-auto-lg,
.grid-auto-xl {
  // auto-sized grid
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs {
  --col-min-width: 8rem;
}
.grid-auto-sm {
  --col-min-width: 10rem;
}
.grid-auto-md {
  --col-min-width: 15rem;
}
.grid-auto-lg {
  --col-min-width: 20rem;
}
.grid-auto-xl {
  --col-min-width: 25rem;
}

.grid-auto-cols {
  // cols = same size
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-gap-xxxxs {
  --grid-gap: var(--spacer-2xs, 0.125rem);
}
.grid-gap-xxxs {
  --grid-gap: var(--spacer-3xs, 0.25rem);
}
.grid-gap-xxs {
  --grid-gap: var(--spacer-2xs, 0.375rem);
}
.grid-gap-xs {
  --grid-gap: var(--spacer-xs, 0.5rem);
}
.grid-gap-sm {
  --grid-gap: var(--spacer-sm, 0.75rem);
}
.grid-gap-md {
  --grid-gap: var(--spacer-md, 1.25rem);
}
.grid-gap-lg {
  --grid-gap: var(--spacer-lg, 2rem);
}
.grid-gap-xl {
  --grid-gap: var(--spacer-xl, 3.25rem);
}
.grid-gap-xxl {
  --grid-gap: var(--spacer-2xl, 5.25rem);
}
.grid-gap-xxxl {
  --grid-gap: var(--spacer-3xxl, 8.5rem);
}
.grid-gap-xxxxl {
  --grid-gap: var(--spacer-4xl, 13.75rem);
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    --span: #{$i};
  }
  .col-start-#{$i} {
    grid-column-start: #{$i};
  }
  .col-end-#{$i + 1} {
    grid-column-end: #{$i + 1};
  }
}

.col-start {
  grid-column-start: 1;
}
.col-end {
  grid-column-end: -1;
}

// breakpoints
$breakpoints: (
  xs: 32rem,
  sm: $tablet-min,
  md: $desktop-min,
  lg: $desktop-l-min,
  xl: $desktop-xl-min,
  xxl: $desktop-xxl-min,
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
    @content;
  }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs {
    --col-min-width: 8rem;
  }
  .grid-auto-sm\@xs {
    --col-min-width: 10rem;
  }
  .grid-auto-md\@xs {
    --col-min-width: 15rem;
  }
  .grid-auto-lg\@xs {
    --col-min-width: 20rem;
  }
  .grid-auto-xl\@xs {
    --col-min-width: 25rem;
  }

  .grid-auto-cols\@xs {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs {
      --span: #{$i};
    }
    .col-start-#{$i}\@xs {
      grid-column-start: #{$i};
    }
    .col-end-#{$i + 1}\@xs {
      grid-column-end: #{$i + 1};
    }
  }

  .col-start\@xs {
    grid-column-start: 1;
  }
  .col-end\@xs {
    grid-column-end: -1;
  }

  .col-start-auto\@xs {
    grid-column-start: auto;
  }
  .col-end-auto\@xs {
    grid-column-end: auto;
  }
}

@include breakpoint(sm) {
  .grid-auto-xs\@sm {
    --col-min-width: 8rem;
  }
  .grid-auto-sm\@sm {
    --col-min-width: 10rem;
  }
  .grid-auto-md\@sm {
    --col-min-width: 15rem;
  }
  .grid-auto-lg\@sm {
    --col-min-width: 20rem;
  }
  .grid-auto-xl\@sm {
    --col-min-width: 25rem;
  }

  .grid-auto-cols\@sm {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@sm {
      --span: #{$i};
    }
    .col-start-#{$i}\@sm {
      grid-column-start: #{$i};
    }
    .col-end-#{$i + 1}\@sm {
      grid-column-end: #{$i + 1};
    }
  }

  .col-start\@sm {
    grid-column-start: 1;
  }
  .col-end\@sm {
    grid-column-end: -1;
  }

  .col-start-auto\@sm {
    grid-column-start: auto;
  }
  .col-end-auto\@sm {
    grid-column-end: auto;
  }
}

@include breakpoint(md) {
  .grid-auto-xs\@md {
    --col-min-width: 8rem;
  }
  .grid-auto-sm\@md {
    --col-min-width: 10rem;
  }
  .grid-auto-md\@md {
    --col-min-width: 15rem;
  }
  .grid-auto-lg\@md {
    --col-min-width: 20rem;
  }
  .grid-auto-xl\@md {
    --col-min-width: 25rem;
  }

  .grid-auto-cols\@md {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@md {
      --span: #{$i};
    }
    .col-start-#{$i}\@md {
      grid-column-start: #{$i};
    }
    .col-end-#{$i + 1}\@md {
      grid-column-end: #{$i + 1};
    }
  }

  .col-start\@md {
    grid-column-start: 1;
  }
  .col-end\@md {
    grid-column-end: -1;
  }

  .col-start-auto\@md {
    grid-column-start: auto;
  }
  .col-end-auto\@md {
    grid-column-end: auto;
  }
}

@include breakpoint(lg) {
  .grid-auto-xs\@lg {
    --col-min-width: 8rem;
  }
  .grid-auto-sm\@lg {
    --col-min-width: 10rem;
  }
  .grid-auto-md\@lg {
    --col-min-width: 15rem;
  }
  .grid-auto-lg\@lg {
    --col-min-width: 20rem;
  }
  .grid-auto-xl\@lg {
    --col-min-width: 25rem;
  }

  .grid-auto-cols\@lg {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@lg {
      --span: #{$i};
    }
    .col-start-#{$i}\@lg {
      grid-column-start: #{$i};
    }
    .col-end-#{$i + 1}\@lg {
      grid-column-end: #{$i + 1};
    }
  }

  .col-start\@lg {
    grid-column-start: 1;
  }
  .col-end\@lg {
    grid-column-end: -1;
  }

  .col-start-auto\@lg {
    grid-column-start: auto;
  }
  .col-end-auto\@lg {
    grid-column-end: auto;
  }
}

@include breakpoint(xl) {
  .grid-auto-xs\@xl {
    --col-min-width: 8rem;
  }
  .grid-auto-sm\@xl {
    --col-min-width: 10rem;
  }
  .grid-auto-md\@xl {
    --col-min-width: 15rem;
  }
  .grid-auto-lg\@xl {
    --col-min-width: 20rem;
  }
  .grid-auto-xl\@xl {
    --col-min-width: 25rem;
  }

  .grid-auto-cols\@xl {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xl {
      --span: #{$i};
    }
    .col-start-#{$i}\@xl {
      grid-column-start: #{$i};
    }
    .col-end-#{$i + 1}\@xl {
      grid-column-end: #{$i + 1};
    }
  }

  .col-start\@xl {
    grid-column-start: 1;
  }
  .col-end\@xl {
    grid-column-end: -1;
  }

  .col-start-auto\@xl {
    grid-column-start: auto;
  }
  .col-end-auto\@xl {
    grid-column-end: auto;
  }
}