@use "sass:math";

.flex {
  display: flex;
  flex-flow: row wrap;

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

  &--column {
    flex-direction: column;
  }

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

  &--center {
    justify-content: center;

    &-v {
      align-items: center;
    }
  }

  &--end {
    justify-content: flex-end;

    &-v {
      align-items: flex-end;
    }
  }

  > .col {
    flex: 1 0 0;
    max-width: 100%;

    &--center {
      text-align: center;

      &-v {
        align-self: center;
      }
    }

    @for $i from 1 through 12 {
      &-#{$i} {
        $width: percentage(math.div($i, 12));
        flex: 0 0 $width;
        max-width: $width;
      }
      @include mq-desktop {
        &-d-#{$i} {
          $width: percentage(math.div($i, 12));
          flex: 0 0 $width;
          max-width: $width;
        }
      }
      @include mq-mobile {
        &-m-#{$i} {
          $width: percentage(math.div($i, 12));
          flex: 0 0 $width;
          max-width: $width;
        }
      }
    }
  }
}