$border: 1px solid;
$spacer-base: .25;

@mixin createCols( $size ) {
  @for $i from 1 through 12 {
    .col-#{$size}-#{$i} {
      @include g-unit($i);
    }

    @media #{$small-only} {
      .col-offset-#{$i} {
        margin-left: 0;
      }
    }

    @media #{$medium-up} {
      .col-offset-#{$i} {
        margin-left: calc((100% / 12) * #{$i});
      }
    }
  }

  .col-#{$size}-auto {
    width: auto;
    flex-basis: auto;
  }
}

.layout {
  display: flex;
  flex-wrap: wrap;
}

.col {
  padding-left: $gutter-width;
  padding-right: $gutter-width;
  flex: 1 0 auto;
}

.bordered-buckets {
  [class*='col-'] {
    padding-bottom: ru(1);
  }
}

// used for a unique renters design where a form only needs padding
// on small screen sizes.
@media #{$small-only} {
  .padding-small {
    padding: 0 ru(1);

    &:first-child {
      padding-top: ru(1.5);
    }
  }
}

@media #{$small-up} {
  @include createCols( 'sm' );
}

@media #{$medium-up} {
  @include createCols( 'md' );

  .bordered-buckets {
    [class*='col-'] {
      border-left: $border;
      border-left: $border;
      padding: ru(.75) ru(.25) ru(1.25);
      flex: 1;

      &:first-child {
        padding-left: 0;
        border-left: none;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }
}

@media #{$large-up} {
  @include createCols( 'lg' );

  .bordered-buckets {
    [class*='col-'] {
      flex: 1 0 auto;
    }
  }
}

@media #{$xlarge-up} {
  @include createCols( 'xlg' );
}

@media #{$xxlarge-up} {
  @include createCols( 'xxlg' );
}

// Utility classes must come after base styles
// so that they can override the base in the cascade

.bottom-spacing {
  &-xSmall {
    margin-bottom: ru(.5);
  }

  &-small {
    margin-bottom: ru(1);
  }

  &-medium {
    margin-bottom: ru(1.5);
  }

  &-large {
    margin-bottom: ru(3);
  }

  &-xLarge {
    margin-bottom: ru(6);
  }

  @for $i from 1 through 10 {
    &-#{$i} { margin-bottom: ru($spacer-base * $i); }
  }

  &-11 {
    margin-bottom: ru(3);
  }

  &-12 {
    margin-bottom: ru(6);
  }
}

.fullwidth {
  padding: 0;
}

.padding {
  padding-left: $gutter-width;
  padding-right: $gutter-width;
}

.column {
  flex-direction: column;

  .col {
    flex: 1 0 auto;
  }
}

.flex {
  flex-grow: 1;
}

.nested {
  margin-left: -$gutter-width;
  margin-right: -$gutter-width;
}

.gray-box {
  position: absolute;
  width: 100%;
  height: calc(100% + 72px);
  top: -36px;
  background-color: color('neutral-5');
  z-index: -1;
}