// RAMEN GRID COLUMN OBJECT
//
//
// Required Global Variables:
// $grid-columns
// $grid-gutter
// $grid-gutter-small
// $grid-gutter-medium
// $grid-gutter-large
//
//
// Required Component Variables:
//
// N/A
//
//

@mixin col {
  display: inline-block;
  flex-basis: 100%;
  width: 100%;
}

@mixin col-inner-base {
  height: 100%;
  padding: 0 ($grid-gutter / 2) $grid-gutter;

  @include breakpoint($bp-small) {
    padding: 0 ($grid-gutter-small / 2) $grid-gutter-small;
  }

  @include breakpoint($bp-medium) {
    padding: 0 ($grid-gutter-medium / 2) $grid-gutter-medium;
  }

  @include breakpoint($bp-large) {
    padding: 0 ($grid-gutter-large / 2) $grid-gutter-large;
  }
}

@mixin col-width($cols) {
  flex: 0 0 ramen-grid-width($cols, $grid-columns);
  width: ramen-grid-width($cols, $grid-columns);
}

@mixin col-width-at($cols, $bp) {
  @include breakpoint($bp) {
    flex-basis: ramen-grid-width($cols, $grid-columns);
    width: ramen-grid-width($cols, $grid-columns);
  }
}

@mixin col-offset($cols) {
  margin-left: ramen-grid-width($cols, $grid-columns);
}

@mixin col-offset-at($cols, $bp) {
  @include breakpoint($bp) {
    margin-left: ramen-grid-width($cols, $grid-columns);
  }
}

@mixin col-padding($padding) {
  padding: 0 $padding $gutter;
}

.o-col {
  @include col;

  &__inner {
    @include col-inner-base;
  }

  // Width Classes
  @for $i from 1 through $grid-columns {
    &--#{$i} {
      @include col-width($i);
    }
  }

  // Width Classes (Small)
  @for $i from 1 through $grid-columns {
    &--#{$i}\@small {
      @include col-width-at($i, $bp-small);
    }
  }

  // Width Classes (Medium)
  @for $i from 1 through $grid-columns {
    &--#{$i}\@medium {
      @include col-width-at($i, $bp-medium);
    }
  }

  // Width Classes (Large)
  @for $i from 1 through $grid-columns {
    &--#{$i}\@large {
      @include col-width-at($i, $bp-large);
    }
  }

  // Offset Classes
  @for $i from 1 through $grid-columns {
    &--offset-#{$i} {
      @include col-offset($i);
    }
  }

  // Offset Classes (Small)
  @for $i from 1 through $grid-columns {
    &--offset-#{$i}\@small {
      @include col-offset-at($i, $bp-small);
    }
  }

  // Offset Classes (Medium)
  @for $i from 1 through $grid-columns {
    &--offset-#{$i}\@medium {
      @include col-offset-at($i, $bp-medium);
    }
  }

  // Offset Classes (Large)
  @for $i from 1 through $grid-columns {
    &--offset-#{$i}\@large {
      @include col-offset-at($i, $bp-large);
    }
  }
}