/**
 * Grid mixins
 *
 * NOTE: This is an internal function. It shouldn't be documented
 */

/**
 * Generate a collapse property for a given prefix
 */
@mixin grid-collapse-on-prefix($breakpoint) {
  &.collapse-#{$breakpoint} {
    @include grid-collapse();

    // When collapse, all items except the first one must have the margin-top
    > [class^="col"]:nth-child(n+2) {
      margin-top: $grid-gutter;
    }

    // Reset the border-right for vdivide class
    &.row-vdivide {
      > [class^="col"] {
        border-right: 0;
      }
    }
  }
}

@mixin grid-collapse() {
  > [class^="col"] {
    flex: 0 0 100%;
    margin-top: $grid-gutter;
    max-width: 100%;

    &:first-child {
      margin-top: 0;
    }
  }
}

/**
 * Generate a collapse property for a given prefix
 */
@mixin grid-collapse-by-columns-on-prefix($columns, $breakpoint) {
  &.collapse-#{$columns}-#{$breakpoint} {
    @include grid-collapse-by-columns-on($columns);

    // Reset the border-right for vdivide class
    &.row-vdivide {
      > [class^="col"] {
        &:nth-child(#{$columns}n) {
          border-right: 0;
        }
      }
    }
  }
}

@mixin grid-collapse-by-columns-on($columns) {
  > [class^="col"] {
    $percent: ($grid-columns / $columns) * (100% / $grid-columns);
    flex: 0 0 $percent;
    max-width: $percent;

    // Use it to reset the 'margin-top: 0;' of bigger media queries
    &:nth-child(n) {
      margin-top: $grid-gutter;
    }

    &:nth-child(-n+#{$columns}) {
      margin-top: 0;
    }
  }
}