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

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

$ams-grid-column-count: 12;
$ams-grid-row-span-max: 4;

.ams-grid {
  @include ams-grid;

  align-items: start;
}

// Grid gap

.ams-grid--gap-vertical--none {
  @include ams-grid--gap-vertical--none;
}

.ams-grid--gap-vertical--large {
  @include ams-grid--gap-vertical--large;
}

.ams-grid--gap-vertical--2x-large {
  @include ams-grid--gap-vertical--2x-large;
}

// Grid padding

.ams-grid--padding-bottom--large {
  @include ams-grid--padding-bottom--large;
}

.ams-grid--padding-bottom--x-large {
  @include ams-grid--padding-bottom--x-large;
}

.ams-grid--padding-bottom--2x-large {
  @include ams-grid--padding-bottom--2x-large;
}

.ams-grid--padding-top--large {
  @include ams-grid--padding-top--large;
}

.ams-grid--padding-top--x-large {
  @include ams-grid--padding-top--x-large;
}

.ams-grid--padding-top--2x-large {
  @include ams-grid--padding-top--2x-large;
}

.ams-grid--padding-vertical--large {
  @include ams-grid--padding-vertical--large;
}

.ams-grid--padding-vertical--x-large {
  @include ams-grid--padding-vertical--x-large;
}

.ams-grid--padding-vertical--2x-large {
  @include ams-grid--padding-vertical--2x-large;
}

// Cell

.ams-grid__cell {
  background-color: var(--ams-grid-cell-background-color);
  padding-block: var(--ams-grid-cell-padding-block);
  padding-inline: var(--ams-grid-cell-padding-inline);
}

.ams-grid__cell--flush {
  padding-block: 0;
  padding-inline: 0;
}

.ams-grid__cell--transparent {
  background-color: transparent;
  padding-block: 0;
  padding-inline: 0;
}

// Cell span and start
// The order of these declaration blocks ensures the intended specificity.

.ams-grid__cell--span-all {
  @include ams-grid__cell--span-all;
}

@for $i from 1 through $ams-grid-column-count {
  .ams-grid__cell--span-#{$i} {
    @include ams-grid__cell--span($i);
  }

  .ams-grid__cell--start-#{$i} {
    @include ams-grid__cell--start($i);
  }
}

@media (min-width: $ams-breakpoint-medium) {
  @for $i from 1 through $ams-grid-column-count {
    .ams-grid__cell--span-#{$i}-medium {
      @include ams-grid__cell--span-medium($i);
    }

    .ams-grid__cell--start-#{$i}-medium {
      @include ams-grid__cell--start-medium($i);
    }
  }
}

@media (min-width: $ams-breakpoint-wide) {
  @for $i from 1 through $ams-grid-column-count {
    .ams-grid__cell--span-#{$i}-wide {
      @include ams-grid__cell--span-wide($i);
    }

    .ams-grid__cell--start-#{$i}-wide {
      @include ams-grid__cell--start-wide($i);
    }
  }
}

// Cell row span

@for $i from 1 through $ams-grid-row-span-max {
  .ams-grid__cell--row-span-#{$i} {
    @include ams-grid__cell--row-span($i);
  }
}

@media (min-width: $ams-breakpoint-medium) {
  @for $i from 1 through $ams-grid-row-span-max {
    .ams-grid__cell--row-span-#{$i}-medium {
      @include ams-grid__cell--row-span-medium($i);
    }
  }
}

@media (min-width: $ams-breakpoint-wide) {
  @for $i from 1 through $ams-grid-row-span-max {
    .ams-grid__cell--row-span-#{$i}-wide {
      @include ams-grid__cell--row-span-wide($i);
    }
  }
}