@mixin padding($numero:1) {
  padding-left  : $gap * $numero;
  padding-right : $gap * $numero;
}

@mixin noPaddingContainer() {
  > .#{$item} {
    @include padding(0)
  }
}

@mixin clearfix {
  &:before,
  &:after {
    content : '';
    width   : 100%;
    display : table;
    clear   : both;
  }
}

@mixin toRight($width:auto,$margin-left:1em) {
  float       : right;
  width       : $width;
  margin-left : $margin-left;
}

@mixin toLeft($width:auto,$margin-right:1em) {
  float        : left;
  width        : $width;
  margin-right : $margin-right;
}

@mixin toCenter($width:auto) {
  display      : block;
  width        : $width;
  margin-left  : auto;
  margin-right : auto;
  text-align   : center;
}

@mixin circle {
  border-radius : 50%
}

@mixin full() {
  width     : 100%;
  max-width : 100%;
  clear     : both;
}

@mixin stickyFooter {
  @at-root {
    body {
      display        : flex;
      flex-direction : column;
      min-height     : 100vh;
    }
  }

  margin-top : auto;
}

@mixin cssStyckyFooter {
  display        : flex;
  flex-direction : column;
  min-height     : 100vh;

  > footer {
    margin-top : auto
  }
}

@if $legacy == true {
  .to-center {
    display      : block;
    margin-right : auto;
    margin-left  : auto;

    &.ed-container {
      display : flex;
    }
  }

  .to-left {
    @include toLeft()
  }

  .to-right {
    @include toRight()
  }

  .full {
    @include full()
  }

  .circle {
    @include circle()
  }

  .clearfix {
    @include clearfix()
  }

  .no-padding.#{$container} {
    @include noPaddingContainer()
  }

  .no-padding.#{$item} {
    @include padding(0)
  }

  .padding {
    @include padding(1)
  }

  .padding-2 {
    @include padding(2)
  }

  .padding-3 {
    @include padding(3)
  }

  body.sticky-footer {
    @include cssStyckyFooter()
  }

  .center {
    text-align : center;
  }

  .left {
    text-align : left;
  }

  .right {
    text-align : right;
  }

  // grid version CSS
  .grid-container.grid-1234 {
    @include grid('.grid-item', 1 2 3 4)
  }

  .grid-container.grid-2345 {
    @include grid('.grid-item', 2 3 4 5)
  }

  // Offset CSS
  @include cssOffset();

  // Alineaciones

  /* Clases para alineaciones con compatibilidad hacia atrás
  Sedesactivarán en el futuro
  */

  .main-justify,
  .main-distribute,
  .main-center,
  .main-start,
  .main-end,
  .cross-start,
  .cross-center,
  .cross-end,
  .flex-reverse,
  .flex-column,
  .flex-reverse,
  .abcenter {
    display   : flex;
    flex-wrap : wrap;
  }

  .main-justify {
    justify-content : space-between
  }

  .main-distribute {
    justify-content : space-evenly
  }

  .main-center {
    justify-content : center
  }

  .main-start {
    justify-content : flex-start
  }

  .main-end {
    justify-content : flex-end
  }

  .flex-reverse {
    flex-direction : row-reverse
  }

  .flex-column {
    flex-direction : column
  }

  .flex-column-reverse {
    flex-direction : column-reverse
  }

  .cross-start {
    align-items   : start;
    align-content : start;
  }

  .cross-center {
    align-items   : center;
    align-content : center;
  }

  .cross-end {
    align-items   : end;
    align-content : end;
  }

  .abcenter {
    justify-content : center;
    align-items     : center;
  }
}

/* Mixins de alineacion con compatibilidad hacia atras*/
@mixin crossCenter {
  display       : flex;
  flex-wrap     : wrap;
  align-items   : center;
  align-content : center;
}

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