@import "neat/neat-helpers";

// Change the grid settings
$max-width: map-get($container-max-widths, xl);

// Override the default global box-sizing
$border-box-sizing: false;

// Grid width variables
$large-min-width: 769px;

// breakpoints
$bp-tiny: new-breakpoint(max-width 320px 4);
$bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
$bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
$bp-large: new-breakpoint(min-width $large-min-width max-width 979px, 12);
$bp-huge:  new-breakpoint(min-width 980px 12);

// edX-centric breakpoints (to be temporarily used with edx.org features only)
$edx-bp-tiny: new-breakpoint(max-width 320px 4);
$edx-bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
$edx-bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
$edx-bp-large: new-breakpoint(min-width $large-min-width 12);
$edx-bp-huge:  new-breakpoint(min-width 980px 12);

// Wrap grids with grid-container.
@mixin grid-container() {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    margin: 0 auto;
}

@mixin span($cols, $margin:'') {
  @include margin-left(calc(0.5 * #{$grid-gutter-width}));
  @include margin-right(calc(0.5 * #{$grid-gutter-width}));

  width: calc(#{cols($cols)} - #{$grid-gutter-width});

  @if ($margin == 'before') {
    @include margin-right(0);

    width: calc(#{cols($cols)} - 0.5 * #{$grid-gutter-width});
  } @else if ($margin == 'after') {
    @include margin-left(0);

    width: calc(#{cols($cols)} - 0.5 * #{$grid-gutter-width});
  } @else if ($margin == 'none') {
    @include margin-left(0);
    @include margin-right(0);

    width: cols($cols);
  }
}
