@use 'sass:map';
@use '../utils';

/* stylelint-disable custom-property-pattern */

$grid-sizes-to-breakpoint-map: (
  'xs': xsmall,
  'sm': small,
  'md': medium,
  'lg': large,
  'xl': xlarge,
);

.kirby-grid {
  --kirby-grid-columns: 12;
  --kirby-grid-column-spacing: #{utils.size('m')};
  --kirby-grid-row-spacing: #{utils.size('m')};

  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;

  /*
  We use negative margins to be able to add column and row padding consistently
  around every grid-item even when it is adjacent to the edge of the grid
  */
  margin: calc(var(--kirby-grid-row-spacing) / -2) calc(var(--kirby-grid-column-spacing) / -2);

  &[spacing='0'],
  &[data-spacing='0'] {
    --kirby-grid-column-spacing: 0px;
    --kirby-grid-row-spacing: 0px;
  }

  &[spacing='1'],
  &[data-spacing='1'] {
    --kirby-grid-column-spacing: #{utils.size('xxs')};
    --kirby-grid-row-spacing: #{utils.size('xxs')};
  }

  &[spacing='2'],
  &[data-spacing='2'] {
    --kirby-grid-column-spacing: #{utils.size('s')};
    --kirby-grid-row-spacing: #{utils.size('s')};
  }

  &[spacing='3'],
  &[data-spacing='3'] {
    --kirby-grid-column-spacing: #{utils.size('m')};
    --kirby-grid-row-spacing: #{utils.size('m')};
  }

  &[spacing='4'],
  &[data-spacing='4'] {
    --kirby-grid-column-spacing: #{utils.size('l')};
    --kirby-grid-row-spacing: #{utils.size('l')};
  }

  &[spacing='5'],
  &[data-spacing='5'] {
    --kirby-grid-column-spacing: #{utils.size('xl')};
    --kirby-grid-row-spacing: #{utils.size('xl')};
  }

  &[row-spacing='0'],
  &[data-row-spacing='0'] {
    --kirby-grid-row-spacing: 0px;
  }

  &[row-spacing='1'],
  &[data-row-spacing='1'] {
    --kirby-grid-row-spacing: #{utils.size('xxs')};
  }

  &[row-spacing='2'],
  &[data-row-spacing='2'] {
    --kirby-grid-row-spacing: #{utils.size('s')};
  }

  &[row-spacing='3'],
  &[data-row-spacing='3'] {
    --kirby-grid-row-spacing: #{utils.size('m')};
  }

  &[row-spacing='4'],
  &[data-row-spacing='4'] {
    --kirby-grid-row-spacing: #{utils.size('l')};
  }

  &[row-spacing='5'],
  &[data-row-spacing='5'] {
    --kirby-grid-row-spacing: #{utils.size('xl')};
  }

  &[column-spacing='0'],
  &[data-column-spacing='0'] {
    --kirby-grid-column-spacing: 0px;
  }

  &[column-spacing='1'],
  &[data-column-spacing='1'] {
    --kirby-grid-column-spacing: #{utils.size('xxs')};
  }

  &[column-spacing='2'],
  &[data-column-spacing='2'] {
    --kirby-grid-column-spacing: #{utils.size('s')};
  }

  &[column-spacing='3'],
  &[data-column-spacing='3'] {
    --kirby-grid-column-spacing: #{utils.size('m')};
  }

  &[column-spacing='4'],
  &[data-column-spacing='4'] {
    --kirby-grid-column-spacing: #{utils.size('l')};
  }

  &[column-spacing='5'],
  &[data-column-spacing='5'] {
    --kirby-grid-column-spacing: #{utils.size('xl')};
  }
}

@mixin column-style($breakpoint) {
  @for $size from 1 through 12 {
    &[#{$breakpoint}='#{$size}'],
    &[data-#{$breakpoint}='#{$size}'] {
      width: calc(100% * #{$size} / var(--kirby-grid-columns));
      flex-grow: 0;
      flex-basis: auto;
    }
  }
}

@function get-breakpoint($grid-size) {
  $breakpoint-map-size: map.get($grid-sizes-to-breakpoint-map, $grid-size);

  @return map.get(utils.$breakpoints, $breakpoint-map-size);
}

@mixin breakpoint-style($grid-size) {
  @if $grid-size == 'xs' {
    @include column-style($grid-size);
  } @else {
    @media (min-width: get-breakpoint($grid-size)) {
      @include column-style($grid-size);
    }
  }
}

.kirby-grid-item {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  max-width: 100%;

  /*
  The grid relies on the box-sizing to be 'border-box'.
  To prevent accidental overwrites !important is used.
  */
  box-sizing: border-box !important;
  padding: calc(var(--kirby-grid-row-spacing) / 2) calc(var(--kirby-grid-column-spacing) / 2);

  @each $grid-size, $_ in $grid-sizes-to-breakpoint-map {
    @include breakpoint-style($grid-size);
  }
}