/*
---
name: Grid System
category:
  - object/component
  - object/component/grid-system
---

```html
<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--reverse">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--nowrap">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--left">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="_c-row _c-row--right">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="_c-row _c-row--center">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="_c-row _c-row--between">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="_c-row _c-row--around">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="_c-row _c-row--top">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--bottom">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--middle">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--baseline">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--collapse">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--margin">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--margin-s">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--margin-l">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="_c-row _c-row--fill">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
*/

.{_prefix}c-row {
  _row();

  &__col {
    _row__col(null, null);
  }

  &--reverse {
    flex-direction: row-reverse;
  }

  for size, screen-min in _sizes {
    +_media-min(screen-min) {
      prefix = _size-prefix(size);

      &{prefix}-nowrap {
        flex-wrap: nowrap;
      }

      &{prefix}-left {
        justify-content: flex-start;
      }

      &{prefix}-right {
        justify-content: flex-end;
      }

      &{prefix}-center {
        justify-content: center;
      }

      &{prefix}-between {
        justify-content: space-between;
      }

      &{prefix}-around {
        justify-content: space-around;
      }

      &{prefix}-top {
        align-items: flex-start;
      }

      &{prefix}-bottom {
        align-items: flex-end;
      }

      &{prefix}-middle {
        align-items: center;
      }

      &{prefix}-baseline {
        align-items: baseline;
      }

      &{prefix}-collapse {
        _row--margin(0);

        > .{_prefix}c-row__col {
          _row__col--margin(0);
        }
      }

      &{prefix}-margin {
        _row--margin(1);

        > .{_prefix}c-row__col {
          _row__col--margin(1);
        }

        &-s {
          _row--margin(.5);

          > .{_prefix}c-row__col {
            _row__col--margin(.5);
          }
        }

        &-l {
          _row--margin(2);

          > .{_prefix}c-row__col {
            _row__col--margin(2);
          }
        }
      }

      &{prefix}-fill {
        > .{_prefix}c-row__col {
          display: flex;

          > * {
            _row__col--width(100%);
          }
        }
      }
    }
  }
}

for size, screen-min in _sizes {
  +_media-min(screen-min) {
    prefix = _size-prefix(size);

    for max_columns in range(1, _max-columns) {
      for i in range(1, max_columns) {
        gcd = _gcd(i, max_columns);

        if (gcd == 1) {
          $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd} {
            _row__col(i, max_columns);
          }

          $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd} {
            _row__col--offset(i, max_columns);
          }
        }
      }
    }

    $_bs-item{prefix}-full {
      _row__col--width(100%);
    }

    .{_prefix}c-row__col {
      &{prefix}-auto {
        _row__col--width(auto);
      }

      &{prefix}-justify {
        _row__col--width(1);
      }

      &{prefix}-offset-0 {
        _row__col--offset(0);
      }

      &{prefix}-shrink {
        flex-grow: 0;
      }

      &{prefix}-fit {
        flex: 0 1 auto;
      }
    }
  }
}

.{_prefix}c-row__col {
  for size, screen-min in _sizes {
    +_media-min(screen-min) {
      prefix = _size-prefix(size);

      for max_columns in range(_min-columns, _max-columns) {
        for i in range(1, max_columns) {
          gcd = _gcd(i, max_columns);

          &{prefix}-{i}-{max_columns} {
            if (i != max_columns) {
              @extend $_bs-item{prefix}-gcd-{i / gcd}-{max_columns / gcd};
            } else {
              @extend $_bs-item{prefix}-full;
            }
          }

          if (i < max_columns) {
            &{prefix}-offset-{i}-{max_columns} {
              @extend $_bs-item{prefix}-offset-gcd-{i / gcd}-{max_columns / gcd};
            }
          }
        }
      }
    }
  }
}