@import '../../../styles/core.scss';

$flexers: (
  col: (
    flow: nowrap column,
  ),
  row: (
    flow: nowrap row,
  ),
);

$attrs: (
  text-align: right center left,
  align-items: flex-start flex-end center baseline stretch,
  justify-content: center space-between space-around flex-end flex-start stretch,
);

@mixin modify {
  @each $prop, $vals in $attrs {
    $index: str-index($prop, '-');
    $key: $prop;
    @if $index { $key: str-slice($prop, 0, $index - 1); }
    @each $val in $vals {
      $index: str-index($val, '-');
      $name: $val;
      @if $index { $name: str-slice($val, $index+1); }
      &[#{$key}=#{$name}] {
        #{$prop}: unquote($val);
      }
    }
  }
}

.Flex {
  & {
    display: flex;
    text-align: left;
    @include modify;
  }
  &[inline] {
    display: inline-flex;
  }
  @each $class, $vals in $flexers {
    &_#{$class} {
      @each $k, $v in $vals {
        flex-#{$k}: $v;
      }
    }
  }
  &_row {
    &, > [flex=inner], > .Flex_inner {
      > * + * {
        margin-left: ms(0);
      }
      > [shift~=start], > .Flex_shift\=start {
        margin-left: auto !important;
      }
      > [shift~=end], > .Flex_shift\=end   {
        margin-right: auto !important;
      }
    }
  }
  &_col {
    &, > [flex=inner], > .Flex_inner {
      > * + * {
      margin-top: ms(0) !important;
      }
      > [shift~=start], > .Flex_shift\=start {
        margin-top: auto !important;
      }
      > [shift~=end], > .Flex_shift\=end   {
        margin-bottom: auto !important;
      }
    }
  }
  [flex=block] {
    flex: 1;
  }
  > .Flex_inner, > [flex=inner] {
    display: inherit;
    flex-flow: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    justify-content: inherit;
    align-items: inherit;
    text-align: inherit;
  }

  &, >.Flex_inner, >[flex=inner] {
    &[text=start], &[text=left] { text-align: left }
    &[text=center] { text-align: center }
    &[text=end], &[text=right] { text-align: right }
  }
}