@use "sass:math";
@use "../../core/function";
@use "../../core/variable";
@use "../../core/mixin";
@use "../../core/abstract";

/*
---
name: .c-row
category:
  - object/component
  - object/component/grid-system
---
Row component of flexbox based grid system

### html
```html
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```
```html
<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```
```html
<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```
```html
<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```
```html
<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```
```html
<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--auto">
    1
  </div>
  <div class="c-row__col c-row__col--auto">
    22
  </div>
  <div class="c-row__col c-row__col--auto">
    333
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--justify">
    1
  </div>
  <div class="c-row__col c-row__col--justify">
    22
  </div>
  <div class="c-row__col c-row__col--justify">
    333
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--fit">
    1
  </div>
  <div class="c-row__col c-row__col--fit">
    22
  </div>
  <div class="c-row__col c-row__col--fit">
    333
  </div>
</div>
```
*/

.c-row {
  --_gap: 0px;
	--_item-width: 100%;

  @include abstract.row();
  margin-right: calc(var(--_gap) * .5 * -1);
  margin-left: calc(var(--_gap) * .5 * -1);
  margin-bottom: calc(var(--_gap) * -1);

  > .c-row__col {
    padding-right: calc(var(--_gap) * .5);
    padding-left: calc(var(--_gap) * .5);
    margin-bottom: var(--_gap);
  }

	&__col {
		flex: 0 0 var(--_item-width);
		max-width: var(--_item-width);
	}

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

  @each $size, $screen-min in variable.$sizes {
    @include mixin.media-min($screen-min) {
      $prefix: function.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 {
        --_gap: 0px;
      }

      &#{ $prefix }-margin {
        --_gap: var(--_margin1);
      }

      &#{ $prefix }-margin-s {
        --_gap: var(--_margin-1);
      }

      &#{ $prefix }-margin-l {
        --_gap: var(--_margin2);
      }

      &#{ $prefix }-fill {
        > .c-row__col {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}

@each $size, $screen-min in variable.$sizes {
  @include mixin.media-min($screen-min) {
    $prefix: function.size-prefix($size);

    @for $max_columns from 1 through variable.$max-columns {
      @for $i from 1 through $max_columns {
        $gcd: function.gcd($i, $max_columns);

        @if (1 == $gcd) {
          %_bs-item#{ $prefix }-gcd-#{ math.div($i, $gcd) }-#{ math.div($max_columns, $gcd) } {
            --_item-width: #{ math.div($i, $max_columns) * 100%};
          }
        }
      }
    }

    %_bs-item#{ $prefix }-full {
      --_item-width: 100%;
    }

    .c-row__col {
      &#{ $prefix }-auto {
        flex: auto;
        --_item-width: auto;
      }

      &#{ $prefix }-justify {
        flex: 1;
      }

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

.c-row__col {
  @each $size, $screen-min in variable.$sizes {
    @include mixin.media-min($screen-min) {
      $prefix: function.size-prefix($size);

      @for $max_columns from variable.$min-columns through variable.$max-columns {
        @for $i from 1 through $max_columns {
          $gcd: function.gcd($i, $max_columns);

          &#{ $prefix }-#{ $i }-#{ $max_columns } {
            @if ($max_columns != $i) {
              @extend %_bs-item#{ $prefix }-gcd-#{ math.div($i, $gcd) }-#{ math.div($max_columns, $gcd) };
            } @else {
              @extend %_bs-item#{ $prefix }-full;
            }
          }
        }
      }
    }
  }
}