// Layout System

@mixin wdc-col-common {
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
}

@each $breakpoint in $wdc-layout-breakpoints {
  $_name: nth($breakpoint, 1);
  $_size: nth($breakpoint, 2);
  $_spacing: nth($breakpoint, 3);
  $_half-spacing: $_spacing * 0.5;
  $_spacing-compensation: $_half-spacing * -1;

  @media only screen and (min-width: $_size) {
    .wdc-row {
      box-sizing: border-box;
      display: flex;
      flex: 0 1 auto;
      flex-direction: row;
      flex-wrap: wrap;
      margin-right: $_spacing-compensation;
      margin-left: $_spacing-compensation;
    }

    .wdc-col {
      @include wdc-col-common;
      padding-left: $_half-spacing;
      padding-right: $_half-spacing;
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }

    @for $_i from 1 through $wdc-layout-columns {
      .wdc-col-#{$_i} {
        @include wdc-col-common;
        padding-left: $_half-spacing;
        padding-right: $_half-spacing;
        flex-basis: calc(100% / $wdc-layout-columns * $_i);
        max-width: calc(100% / $wdc-layout-columns * $_i);
      }

      .wdc-col-offset-#{$_i} {
        @include wdc-col-common;
        padding-left: $_half-spacing;
        padding-right: $_half-spacing;

        @if $_i == 0 {
          margin-left: 0;
        } @else {
          margin-left: calc(100% / $wdc-layout-columns * $_i);
        }
      }

      .wdc-col-#{$_name}-#{$_i} {
        @include wdc-col-common;
        padding-left: $_half-spacing;
        padding-right: $_half-spacing;
        flex-basis: calc(100% / $wdc-layout-columns * $_i);
        max-width: calc(100% / $wdc-layout-columns * $_i);
      }

      .wdc-col-#{$_name}-offset-#{$_i} {
        @include wdc-col-common;
        padding-left: $_half-spacing;
        padding-right: $_half-spacing;

        @if $_i == 0 {
          margin-left: 0;
        } @else {
          margin-left: calc(100% / $wdc-layout-columns * $_i);
        }
      }
    }
  }
}

.wdc-row {
  &.wdc-row-start {
    justify-content: flex-start;
  }

  &.wdc-row-center {
    justify-content: center;
  }

  &.wdc-row-end {
    justify-content: flex-end;
  }

  &.wdc-row-top {
    align-items: flex-start;
  }

  &.wdc-row-middle {
    align-items: center;
  }

  &.wdc-row-bottom {
    align-items: flex-end;
  }
  &.wdc-row-around {
    justify-content: space-around;
  }
  &.wdc-row-between {
    justify-content: space-between;
  }
}