/**
 * @file
 * Utility classes.
 */

@import "../base/variables.pcss.css";

/*
  ie11-autorow

  IE11 does not automatically place new rows, which leads to overlapping
  content. We can work around this (when we know that each grid item is
  going to span the full width) by setting each child to a new row.
*/
.ie11-autorow > * {
  &:nth-child(1) {
    -ms-grid-row: 1;
  }

  &:nth-child(2) {
    -ms-grid-row: 2;
  }

  &:nth-child(3) {
    -ms-grid-row: 3;
  }

  &:nth-child(4) {
    -ms-grid-row: 4;
  }

  &:nth-child(5) {
    -ms-grid-row: 5;
  }

  &:nth-child(6) {
    -ms-grid-row: 6;
  }

  &:nth-child(7) {
    -ms-grid-row: 7;
  }

  &:nth-child(8) {
    -ms-grid-row: 8;
  }

  &:nth-child(9) {
    -ms-grid-row: 9;
  }

  &:nth-child(10) {
    -ms-grid-row: 10;
  }
}