@use "sass:map";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;

@each $breakpoint in map.keys($breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .margin-#{$infix}-auto {
      margin: auto !important;
    }

    .margin-top-#{$infix}-auto,
    .margin-y-#{$infix}-auto {
      margin-top: auto !important;
    }

    .margin-bottom-#{$infix}-auto,
    .margin-y-#{$infix}-auto {
      margin-bottom: auto !important;
    }

    .margin-left-#{$infix}-auto,
    .margin-x-#{$infix}-auto {
      margin-left: auto !important;
    }

    .margin-right-#{$infix}-auto,
    .margin-x-#{$infix}-auto {
      margin-right: auto !important;
    }

    @each $key, $value in $spacers {
      .margin-#{$infix}-#{$key} {
        margin: #{$value} !important;
      }

      .margin-top-#{$infix}-#{$key},
      .margin-y-#{$infix}-#{$key} {
        margin-top: #{$value} !important;
      }

      .margin-bottom-#{$infix}-#{$key},
      .margin-y-#{$infix}-#{$key} {
        margin-bottom: #{$value} !important;
      }

      .margin-left-#{$infix}-#{$key},
      .margin-x-#{$infix}-#{$key} {
        margin-left: #{$value} !important;
      }

      .margin-right-#{$infix}-#{$key},
      .margin-x-#{$infix}-#{$key} {
        margin-right: #{$value} !important;
      }

      .padding-#{$infix}-#{$key} {
        padding: #{$value} !important;
      }

      .padding-top-#{$infix}-#{$key},
      .padding-y-#{$infix}-#{$key} {
        padding-top: #{$value} !important;
      }

      .padding-bottom-#{$infix}-#{$key},
      .padding-y-#{$infix}-#{$key} {
        padding-bottom: #{$value} !important;
      }

      .padding-left-#{$infix}-#{$key},
      .padding-x-#{$infix}-#{$key} {
        padding-left: #{$value} !important;
      }

      .padding-right-#{$infix}-#{$key},
      .padding-x-#{$infix}-#{$key} {
        padding-right: #{$value} !important;
      }

      .margin-#{$infix}-neg-#{$key} {
        margin: calc(#{$value} * -1) !important;
      }

      .margin-top-#{$infix}-neg-#{$key},
      .margin-y-#{$infix}-neg-#{$key} {
        margin-top: calc(#{$value} * -1) !important;
      }

      .margin-bottom-#{$infix}-neg-#{$key},
      .margin-y-#{$infix}-neg-#{$key} {
        margin-bottom: calc(#{$value} * -1) !important;
      }

      .margin-left-#{$infix}-neg-#{$key},
      .margin-x-#{$infix}-neg-#{$key} {
        margin-left: calc(#{$value} * -1) !important;
      }

      .margin-right-#{$infix}-neg-#{$key},
      .margin-x-#{$infix}-neg-#{$key} {
        margin-right: calc(#{$value} * -1) !important;
      }
    }
  }
}