@mixin flexOrder {
  // Solo existe para css, es innecesario en Sass (una sola línea)
  @each $size, $screen-size in $breakpoints{
    @if $size == s {
      @for $i from 1 through 10 {
        .#{$size}-order-#{$i} {
          order: $i;
        }
      }
    } @else {
      @media screen and (min-width: $screen-size){
        @for $i from 1 through 10 {
          .#{$size}-order-#{$i} {
            order: $i;
          }
        }
      }
    }
  }
}

// Alineacion en el main axis
// Aplican al flex-container
@mixin flex {
  display   : flex;
  flex-wrap : wrap;
}

@mixin mainJustify {
  @include flex;
  justify-content : space-between;
}

@mixin cssMainJustify {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-justify {
        @include flex;
        justify-content : space-between;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-justify {
          @include flex;
          justify-content : space-between;
        }
      }
    }
  }
}

@mixin mainDistribute {
  @include flex;
  justify-content : space-around;
}

@mixin cssMainDistribute {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-distribute {
        @include flex;
        justify-content : space-around;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-distribute {
          @include flex;
          justify-content : space-around;
        }
      }
    }
  }
}

@mixin mainCenter {
  @include flex;
  justify-content : center;
}

@mixin cssMainCenter {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-main-center {
        @include flex;
        justify-content : center;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-main-center {
          @include flex;
          justify-content : center;
        }
      }
    }
  }
}

@mixin mainStart{
  @include flex;
  justify-content : flex-start;
}

@mixin cssMainStart{
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-main-start {
        @include flex;
        justify-content : flex-start;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-main-start {
          @include flex;
          justify-content : flex-start;
        }
      }
    }
  }
}

@mixin mainEnd{
  @include flex;
  justify-content : flex-end;
}

@mixin cssMainEnd{
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-main-end {
        @include flex;
        justify-content : flex-end;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-main-end {
          @include flex;
          justify-content : flex-end;
        }
      }
    }
  }
}

// Al inicio en el cross axis para CSSCore
@mixin crossStart{
  @include flex;
  align-items   : flex-start;
  align-content : flex-start;
}

@mixin cssCrossStart{
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-cross-start {
        @include flex;
        align-items   : flex-start;
        align-content : flex-start;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-cross-start {
          @include flex;
          align-items   : flex-start;
          align-content : flex-start;
        }
      }
    }
  }
}

// Al centro en el cross axis para CSSCore
@mixin crossCenter {
  @include flex;
  align-items   : center;
  align-content : center;
}

@mixin cssCrossCenter {
  @each $size, $screen-size in $breakpoints {
    @if $size == 0 {
      .#{$size}-cross-center {
        @include flex;
        align-items   : center;
        align-content : center;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-cross-center {
          @include flex;
          align-items   : center;
          align-content : center;
        }
      }
    }
  }
}

// Al final en el cross axis para CSSCore
@mixin crossEnd {
  @include flex;
  align-items   : flex-end;
  align-content : flex-end;
}

@mixin cssCrossEnd {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-cross-end {
        @include flex;
        align-items   : flex-end;
        align-content : flex-end;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-cross-end {
          @include flex;
          align-items   : flex-end;
          align-content : flex-end;
        }
      }
    }
  }
}

// Orientación del container
@mixin flexReverse {
  @include flex;
  flex-direction : row-reverse;
}

@mixin cssFlexReverse{
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-reverse {
        @include flex;
        flex-direction : row-reverse;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-reverse {
          @include flex;
          flex-direction : row-reverse;
        }
      }
    }
  }
}

@mixin flexColumn {
  @include flex;
  flex-direction : column;
}

@mixin cssFlexColumn {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-column {
        @include flex;
        flex-direction : column;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-column {
          @include flex;
          flex-direction : column;
        }
      }
    }
  }
}

@mixin flexColumnReverse {
  @include flex;
  flex-direction : column-reverse;
}

@mixin cssFlexColumnReverse {
  @each $size, $screen-size in $breakpoints {
    @if $size == s {
      .#{$size}-column-reverse {
        @include flex;
        flex-direction : column-reverse;
      }
    } @else {
      @media all and (min-width: $screen-size){
        .#{$size}-column-reverse {
          @include flex;
          flex-direction : column-reverse;
        }
      }
    }
  }
}

// Centrado absoluto (vertical y horizontal)
@mixin flexCenter($child: null) {
  display         : flex;
  justify-content : center;
  align-items     : center;
  text-align      : center;

  @if $child != null {
    #{$child}{
      margin : auto;
    }
  }
}

// Versiones CSS Helpers
// si se omite el breakpoint se aplica siempre
@mixin flexCssHelpers {
  .main-justify        { @include mainJustify       }
  .main-distribute     { @include mainDistribute    }
  .main-center         { @include mainCenter        }
  .main-start          { @include mainStart         }
  .main-end            { @include mainEnd           }
  .cross-start         { @include crossStart        }
  .cross-center        { @include crossCenter       }
  .cross-end           { @include crossEnd          }
  .flex-reverse        {  @include flexReverse      }
  .flex-column         { @include flexColumn        }
  .flex-column-reverse { @include flexColumnReverse }
  .abcenter            { @include flexCenter        }
}