/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

/* stylelint-disable no-invalid-position-declaration */

@use "../../common/breakpoint" as *;

@mixin ams-grid {
  column-gap: var(--ams-grid-column-gap);
  display: grid;
  grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
  padding-inline: var(--ams-grid-padding-inline);
  row-gap: var(--ams-grid-row-gap-xl);

  @media (min-width: $ams-breakpoint-medium) {
    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
    padding-inline: var(--ams-grid-medium-padding-inline);
  }

  @media (min-width: $ams-breakpoint-wide) {
    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
    padding-inline: var(--ams-grid-wide-padding-inline);
  }
}

// Grid gap

@mixin ams-grid--gap-vertical--none {
  row-gap: initial;
}

@mixin ams-grid--gap-vertical--large {
  row-gap: var(--ams-grid-row-gap-l);
}

@mixin ams-grid--gap-vertical--2x-large {
  row-gap: var(--ams-grid-row-gap-2xl);
}

// Grid padding

@mixin ams-grid--padding-bottom--large {
  padding-block-end: var(--ams-grid-padding-block-l);
}

@mixin ams-grid--padding-bottom--x-large {
  padding-block-end: var(--ams-grid-padding-block-xl);
}

@mixin ams-grid--padding-bottom--2x-large {
  padding-block-end: var(--ams-grid-padding-block-2xl);
}

@mixin ams-grid--padding-top--large {
  padding-block-start: var(--ams-grid-padding-block-l);
}

@mixin ams-grid--padding-top--x-large {
  padding-block-start: var(--ams-grid-padding-block-xl);
}

@mixin ams-grid--padding-top--2x-large {
  padding-block-start: var(--ams-grid-padding-block-2xl);
}

@mixin ams-grid--padding-vertical--large {
  padding-block: var(--ams-grid-padding-block-l);
}

@mixin ams-grid--padding-vertical--x-large {
  padding-block: var(--ams-grid-padding-block-xl);
}

@mixin ams-grid--padding-vertical--2x-large {
  padding-block: var(--ams-grid-padding-block-2xl);
}

@mixin ams-grid__cell--span-all {
  grid-column: 1 / -1;
}

// Column span

@mixin ams-grid__cell--span($i) {
  grid-column-end: span $i;
}

@mixin ams-grid__cell--start($i) {
  grid-column-start: $i;
}

@mixin ams-grid__cell--span-medium($i) {
  @media (min-width: $ams-breakpoint-medium) {
    grid-column-end: span $i;
  }
}

@mixin ams-grid__cell--start-medium($i) {
  @media (min-width: $ams-breakpoint-medium) {
    grid-column-start: $i;
  }
}

@mixin ams-grid__cell--span-wide($i) {
  @media (min-width: $ams-breakpoint-wide) {
    grid-column-end: span $i;
  }
}

@mixin ams-grid__cell--start-wide($i) {
  @media (min-width: $ams-breakpoint-wide) {
    grid-column-start: $i;
  }
}