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

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

$ams-breakout-row-span-max: 4;

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

// Grid gap

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

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

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

// Grid padding

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

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

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

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

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

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

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

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

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

// Column span
// The order of these declaration blocks ensures the intended specificity.

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

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

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

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

    .ams-breakout__cell--col-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-breakout__cell--col-span-#{$i}-wide {
      @include ams-grid__cell--span-wide($i);
    }

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

// Has content

.ams-breakout__cell--has-figure {
  align-self: end;
}

.ams-breakout__cell--has-spotlight {
  display: grid; /* Stretches the empty Spotlight vertically. */
  margin-block: calc(var(--ams-space-xl) * -1);
  margin-inline: calc(var(--ams-grid-padding-inline) * -1);

  @media (min-width: $ams-breakpoint-medium) {
    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
  }

  @media (min-width: $ams-breakpoint-wide) {
    margin-inline: calc(var(--ams-grid-wide-padding-inline) * -1);
  }

  .ams-breakout--gap-vertical--small > & {
    margin-block: calc(var(--ams-space-l) * -1);
  }

  .ams-breakout--gap-vertical--large > & {
    margin-block: calc(var(--ams-space-2xl) * -1);
  }
}

// Row span

@for $i from 1 through $ams-breakout-row-span-max {
  .ams-breakout__cell--row-span-#{$i} {
    grid-row-end: span $i;
  }

  .ams-breakout__cell--row-start-#{$i} {
    grid-row-start: $i;
  }
}

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

    .ams-breakout__cell--row-start-#{$i}-medium {
      grid-row-start: $i;
    }
  }
}

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

    .ams-breakout__cell--row-start-#{$i}-wide {
      grid-row-start: $i;
    }
  }
}