@use 'sass:math';
@use '../../global/scss/tools' as nsw;

.nsw-container {
  @include nsw.container;

  &--flush {
    padding-left: 0;
    padding-right: 0;
  }
}

.nsw-grid {
  @include nsw.grid();

  &--spaced {
    margin-top: nsw.rem(-(nsw.$grid-gutters));
    margin-bottom: nsw.rem(-(nsw.$grid-gutters));

    @include nsw.breakpoint('md') {
      margin-top: nsw.rem(-(nsw.$grid-gutters)*2);
      margin-bottom: nsw.rem(-(nsw.$grid-gutters)*2);
    }

    .nsw-col {
      padding-top: nsw.rem(nsw.$grid-gutters*2);
      padding-bottom: nsw.rem(nsw.$grid-gutters*2);

      @include nsw.breakpoint('md') {
        padding-top: nsw.rem(nsw.$grid-gutters*4);
        padding-bottom: nsw.rem(nsw.$grid-gutters*4);
      }
    }
  }

  &--flush {
    margin-top: nsw.rem(-(nsw.$grid-gutters));
    margin-bottom: nsw.rem(-(nsw.$grid-gutters));

    @include nsw.breakpoint('md') {
      margin-top: nsw.rem(-(nsw.$grid-gutters)*2);
      margin-bottom: nsw.rem(-(nsw.$grid-gutters)*2);
    }
  }

  &-overlay {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;

    .nsw-container,
    .nsw-grid {
      height: 100%;
    }

    .nsw-col {
      padding-top: 0;
      padding-bottom: 0;

      > div {
        height: 100%;
        background-color: var(--nsw-brand-accent);
        opacity: 0.1;
      }
    }
  }
}

.nsw-row {
  @include nsw.row();

  &--reverse {
    @include nsw.breakpoint('lg') {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
  }
}

.nsw-col {
  @include nsw.column-default();

  @for $i from 1 through 12 {
    &-#{$i} {
      width: math.percentage(math.div($i, 12));
      max-width: math.percentage(math.div($i, 12));
    }
  }

  @each $breakpoint, $breakpoint-size in nsw.$nsw-breakpoints {
    @include nsw.breakpoint($breakpoint) {
      @for $i from 1 through 12 {
        &-#{$breakpoint}-#{$i} {
          width: math.percentage(math.div($i, 12));
          max-width: math.percentage(math.div($i, 12));
        }
      }
    }
  }
}

.nsw-offset {
  @for $i from 1 through 12 {
    &-#{$i} {
      margin-left: math.percentage(math.div($i, 12));
    }
  }

  @each $breakpoint, $breakpoint-size in nsw.$nsw-breakpoints {
    @include nsw.breakpoint($breakpoint) {
      @for $i from 1 through 12 {
        &-#{$breakpoint}-#{$i} {
          margin-left: math.percentage(math.div($i, 12));
        }
      }
    }
  }
}