@use 'sass:list';
@use '../variables' as mbi;

@mixin row() {
  &-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px -10px;

    &.align-center { align-items: center; }
    &.align-start { align-items: flex-start; }
    &.align-end { align-items: flex-end; }

    &.justify-center { justify-content: center; }
    &.justify-start { justify-content: flex-start; }
    &.justify-end { justify-content: flex-end; }
    &.justify-baseline { justify-content: baseline; }
    &.justify-space-around { justify-content: space-around; }
    &.justify-space-between { justify-content: space-between; }
    &.justify-space-evenly { justify-content: space-evenly; }

    > * {
      display: block;
      padding: 0px 10px;
      flex: 1 0 100%;
      width: 100%;
    }

    > .col {
      flex: 1 0 0;
      width: auto;

      &-auto {
        flex: 0 0 auto;
        width: auto;
      }

      $minRange: list.nth(mbi.$colRange, 1);
      $maxRange: list.nth(mbi.$colRange, 2);

      @for $n from $minRange through $maxRange {
        $colWidth: calc($n / $maxRange * 100%);

        &-#{$n} {
          flex: 0 0 auto;
          width: #{$colWidth};
        }
      }

      @each $name, $width in mbi.$device {
        @media (min-width: $width) {
          &-#{$name}-auto {
            flex: 0 0 auto;
            width: auto;
          }

          @for $n from $minRange through $maxRange {
            $colWidth: calc($n / $maxRange * 100%);

            &-#{$name}-#{$n} {
              flex: 0 0 auto;
              width: #{$colWidth};
            }
          }
        }
      }
    }
  }
}