$component-identifier: '.grid';

$gutter-grid: 24px;
$column-count-grid: 12;

#{$component-identifier} {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0 auto;

  &.m-form {
    #{$component-identifier}__column {
      margin: 0 ($gutter-grid / 2);
    }

    &-label-right {
      .form-element__label:not(.m-radio):not(.m-chekbox) {
        width: 100%;
        text-align: right;
        padding-top: 4px;
      }
    }
  }

  &__row {
    display: flex;
    flex-wrap: wrap;
    flex: 1;

    &.m-no-stretch {
      align-items: flex-start;
    }

    &.m-vertical {
      flex-direction: column;
    }

    &.m-alignment-left {
      justify-content: flex-start;

      @for $i from 1 through $column-count-grid {
        #{$component-identifier}__column {
          &.m-small-offset#{$i} {
            margin-left: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
          }
        }
      }
    }

    &.m-alignment-right {
      justify-content: flex-end;

      @for $i from 1 through $column-count-grid {
        #{$component-identifier}__column {
          &.m-small-offset#{$i} {
            margin-right: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
          }
        }
      }
    }

    &.m-alignment-spaced {
      justify-content: space-around;
    }

    &.m-alignment-justify {
      justify-content: space-between;
    }

    &.m-alignment-center {
      justify-content: center;
    }
  }

  &__column {
    @include flexbox-value-width(calc(100% - #{$gutter-grid}));

    margin: ($gutter-grid / 2);

    &.m-shrink {
      flex: 0 1 auto;

      //NOTE: this is to support vertical grid
      align-self: flex-start;
    }

    @for $i from 1 through $column-count-grid {
      &.m-order#{$i} {
        order: $i;
      }

      &.m-small-size#{$i} {
        @include flexbox-value-width(calc(#{$i / $column-count-grid * 100%} - #{$gutter-grid}));
      }
    }
  }
}

@media #{$medium-screen-media-query} {
  #{$component-identifier} {
    &__row {
      &.m-alignment-left {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-medium-offset#{$i} {
              margin-left: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }

      &.m-alignment-right {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-medium-offset#{$i} {
              margin-right: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }
    }

    &__column {
      flex: 1;
      max-width: none;

      @for $i from 1 through $column-count-grid {
        &.m-medium-size#{$i} {
          @include flexbox-value-width(calc(#{$i / $column-count-grid * 100%} - #{$gutter-grid}));
        }
      }
    }
  }
}

@media #{$large-screen-media-query} {
  #{$component-identifier} {
    &__row {
      &.m-alignment-left {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-large-offset#{$i} {
              margin-left: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }

      &.m-alignment-right {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-large-offset#{$i} {
              margin-right: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }
    }

    &__column {
      @for $i from 1 through $column-count-grid {
        &.m-large-size#{$i} {
          @include flexbox-value-width(calc(#{$i / $column-count-grid * 100%} - #{$gutter-grid}));
        }
      }
    }
  }
}

@media #{$extra-large-screen-media-query} {
  #{$component-identifier} {
    &__row {
      &.m-alignment-left {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-extra-large-offset#{$i} {
              margin-left: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }

      &.m-alignment-right {
        #{$component-identifier}__column {
          @for $i from 1 through $column-count-grid {
            &.m-extra-large-offset#{$i} {
              margin-right: calc(#{$i / $column-count-grid * 100%} + #{$gutter-grid / 2});
            }
          }
        }
      }
    }
    &__column {
      @for $i from 1 through $column-count-grid {
        &.m-extra-large-size#{$i} {
          @include flexbox-value-width(calc(#{$i / $column-count-grid * 100%} - #{$gutter-grid}));
        }
      }
    }
  }
}

$component-identifier: '';