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

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

$ams-grid-column-count: 12;

.ams-grid {
  @include ams-grid;
}

// 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;
}

// Column span
// 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);
    }
  }
}