// vf-grid

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

/* stylelint-disable order/order */
.vf-grid {
  display: flex;
}
.vf-grid > * {
  flex: 1;
  margin: 0 0 1rem 1.2292328%;
}

.vf-grid > *:first-child {
  margin-left: 0;
}


[class*='vf-grid__'] {
  flex-wrap: wrap;
}
// Originally the calculations in the flex declarations below were created using CSS calc
// Unfortunately IE11 (which this flexbox grid is for) does not support calc inside of flex
// So we've hard coded the percentage values. All other modern browsers get to use grid.
.vf-grid__col-2 > * {
  flex: 0 0 49.3853836%;
  max-width: 49.3853836%;

  &:nth-of-type(3n) {
    margin-left: 0;
  }
}

.vf-grid__col-3 > *{
  flex: 0 0 32.513844467%;
  max-width: 32.513844467%;

  &:nth-of-type(4n) {
    margin-left: 0;
  }
}

.vf-grid__col-4 > * {
  // 0.9219246
  flex: 0 0 24.0780754%;
  max-width: 24.0780754%;


  &:nth-of-type(5n) {
    margin-left: 0;
  }
}

.vf-grid__col-5 > * {
  // 0.98338624
  flex: 0 0 19.01661376%;
  max-width: 19.01661376%;


  &:nth-of-type(6n) {
    margin-left: 0;
  }
}

.vf-grid__col-6 > * {
  // 1.024360667
  flex: 0 0 15.642306333%;
  max-width: 15.642306333%;


  &:nth-of-type(7n) {
    margin-left: 0;
  }
}

@media (max-width: 1023px) {
  .vf-grid {
    flex-wrap: wrap;
  }
  .vf-grid > *{
    flex: 0 0 49.18305%;
  }
}


@supports (display: grid) {
  .vf-grid {
    display: grid;
    grid-column: main;
    grid-column-gap: var(--page-grid-gap);
    grid-row-gap: var(--page-row-gap, var(--page-grid-gap));
  }

  @media (min-width: 840px) {
    .vf-grid {
      grid-auto-flow: column
    }
  }
  // This rule seems to break things more than it fixes.
  // @media (max-width: 1299px) {
  //   .vf-grid {
  //     grid-column: 1 / -1;
  //   }
  // }

  // This is needed for when the vf-grid is nested inside an embl-grid, like the news
  // home page.
  @media (max-width: 1299px) {
    .embl-grid .vf-grid {
      grid-column: 1 / -1;
    }
  }

  .vf-grid > * {
    margin: 0;
    max-width: unset;
  }

  [class*='grid__'] {
    grid-auto-flow: unset;
  }

  // .vf-grid__col-1 > * + * {
  //   border-top: 1px solid color(grey);
  //   padding-top: map-get($vf-spacing-map, vf-spacing-xxl);
  //
  //   &:last-of-type {
  //     margin-bottom: 0;
  //   }
  // }

  .vf-grid__col-1 {
    grid-template-columns: repeat(1, 1fr);
  }


  @media (min-width: 768px) {
    .vf-grid__col-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .vf-grid__col-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .vf-grid__col-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    .vf-grid__col-5 {
      grid-template-columns: repeat(3, 1fr);
    }
    .vf-grid__col-6 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .vf-grid__col-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .vf-grid__col-5 {
      grid-template-columns: repeat(5, 1fr);
    }
    .vf-grid__col-6 {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  // Grid Spans
  .vf-grid__col--span-2 {
    grid-column-end: span 2;
  }
  .vf-grid__col--span-3 {
    grid-column-end: span 3;
  }
  .vf-grid__col--span-4 {
    grid-column-end: span 4;
  }
  .vf-grid__col--span-5 {
    grid-column-end: span 5;
  }
  .vf-grid__col--span-6 {
    grid-column-end: span 6;
  }
  .vf-grid__col--span-all {
    grid-column: 1 / -1;
  }

  .vf-grid__row--span-2 {
    grid-row-end: span 2;
  }
  .vf-grid__row--span-3 {
    grid-row-end: span 3;
  }
  .vf-grid__row--span-4 {
    grid-row-end: span 4;
  }
  .vf-grid__row--span-5 {
    grid-row-end: span 5;
  }
  .vf-grid__row--span-6 {
    grid-row-end: span 6;
  }
  .vf-grid__row--span-all {
    grid-row: 1 / -1;
  }
}
/* stylelint-enable order/order */