/*------------------------------------------------------------
HELPERS
====================================*/

/* Variables Custom */
$positions: (
        "top",
        "right",
        "bottom",
        "left"
);
/***************************************/

// Colors
@each $color, $value in $theme-colors {
  .bg-#{$color} {
    background: $value;
  }
}

@each $color, $value in $grays {
  .bg-gray-#{$color} {
    background: $value;
  }
}

// Margin/Padding
.margin-auto {
  margin: auto;
}
@for $i from 1 through 5 {
  .margin-#{$i} {
    margin: #{$i}rem;
  }

  .padding-#{$i} {
    padding: #{$i}rem;
  }
}
@each $position in $positions {
  .margin-#{$position}-auto {
    margin-#{$position}: auto;
  }

  @for $i from 1 through 5 {
    body .margin-#{$position}-#{$i} {
      margin-#{$position}: #{$i}rem;
    }

    .padding-#{$position}-#{$i} {
      padding-#{$position}: #{$i}rem;
    }
  }
}
