@use "../config";
@use "../variables";
@use "sass:map";

// Spacers

// padding and margin by direction
@each $prop, $letter in (margin: m, padding: p) {
  @each $direction, $d in variables.$xy-border {
    @each $unit, $rem in variables.$spacers {
      .#{$letter}#{$d}-#{$unit} {
        #{$prop}-#{$direction}: #{$rem} !important;
      }
    }
  }
}

// padding and margin all around
@each $prop, $letter in (margin: m, padding: p) {
  @each $unit, $rem in variables.$spacers {
    .#{$letter}-#{$unit} {
      #{$prop}: #{$rem} !important;
    }
  }
}

// padding and margin on x and y axis
@each $prop, $letter in (margin: m, padding: p) {
  @each $unit, $rem in variables.$spacers {
    .#{$letter}x-#{$unit} {
      #{$prop}-left: $rem !important;
      #{$prop}-right: $rem !important;
    }
    .#{$letter}y-#{$unit} {
      #{$prop}-top: $rem !important;
      #{$prop}-bottom: $rem !important;
    }
  }
}

// padding and margin for mobile bottom only
@each $prop, $letter in (margin: m, padding: p) {
  @each $unit, $rem in variables.$spacers {
    .#{$letter}b-mobile-#{$unit} {
      @media (min-width: map.get(config.$breakpoints, mobile)) and (max-width: map.get(config.$breakpoints, tablet) - 1) {
        #{$prop}-bottom: #{$rem} !important;
      }
    }
  }
}

.mx-auto {
  margin: 0 auto;
}