/*
 * CSS Grid
 */
@use 'sass:map';
@use 'sass:math';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;

$gapsSmall: map.get(variables.$spacing, 'size-16');
$gapsMedium: map.get(variables.$spacing, 'size-32');

.pkt-grid {
  display: grid;
  gap: $gapsSmall;
  grid-template-columns: repeat(12, 1fr);
  margin-inline: auto;
  width: 100%;

  @include bp('tablet-up') {
    gap: $gapsMedium;
  }

  &--padding {
    padding-inline: $gapsSmall;
    @include bp('tablet-up') {
      padding-inline: $gapsMedium;
    }
  }

  &--inline {
    display: inline-grid;
  }

  &--dense {
    grid-auto-flow: dense;
  }

  // Widths
  &--full {
    max-width: 100%;
  }
  @include bp-up(36rem) {
    &--phablet {
      max-width: 36rem;
    }
  }
  @include bp-up(48rem) {
    &--tablet {
      max-width: 48rem;
    }
  }
  @include bp-up(64rem) {
    &--tablet-big {
      max-width: 64rem;
    }
  }
  @include bp-up(80rem) {
    &--laptop {
      max-width: 80rem;
    }
  }
  @include bp-up(100rem) {
    &--desktop {
      max-width: 100rem;
    }
  }

  // Alignment
  &--left {
    margin-left: 0;
    margin-right: auto;
  }
  &--center {
    margin-inline: auto;
  }
  &--right {
    margin-left: auto;
    margin-right: 0;
  }

  // Gap
  @each $sp-name, $sp-value in variables.$spacing {
    &--gap-#{$sp-name} {
      gap: $sp-value;
    }
    &--colgap-#{$sp-name} {
      column-gap: $sp-value;
    }
    &--rowgap-#{$sp-name} {
      row-gap: $sp-value;
    }
  }

  // grid cell
  & > .pkt-cell,
  & > * > .pkt-cell {
    // Alignment
    &--left {
      justify-self: start;
    }
    &--center {
      justify-self: center;
    }
    &--right {
      justify-self: end;
    }

    &--top {
      align-self: self-start;
    }

    &--center-vertical {
      align-self: center;
    }
    &--bottom {
      align-self: self-end;
    }

    @for $i from 1 through 12 {
      &.pkt-cell--span#{$i} {
        grid-column-end: span $i;
      }
    }

    // Eksplisitt plassering. 13 er linja etter siste kolonne.
    @for $i from 1 through 13 {
      &.pkt-cell--start#{$i} {
        grid-column-start: $i;
      }
      &.pkt-cell--end#{$i} {
        grid-column-end: $i;
      }
    }
  }
}