@use 'sass:string';
@use 'bulma/sass/utilities/mixins';
/*
* This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
* It will generate several classes such as:
*
* .mr-10 which gives margin-right 10 pixels.
* .mr-15 gives MARGIN to the RIGHT 15 pixels.
* .mt-15 gives MARGIN to the TOP 15 pixels and so on.
*
* .pb-5 gives PADDING to the BOTTOM of 5 pixels
* .pl-40 gives PADDING to the LEFT of 40 pixels
*
* The first letter is "m" or "p" for MARGIN or PADDING
* Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
* Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
*
* You can also use -mobile suffixes to specify that they only effect devices below a specific size.
*
* .mr-10-mobile gives margin-right 10 pixels only on mobile.
* .p-20-mobile gives padding 20 pixels only on mobile.
*/

$spaceamounts: (
  0,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  75,
  100
); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
  .m-#{$space} {
    margin: #{$space}px !important;
  }

  .p-#{$space} {
    padding: #{$space}px !important;
  }
}

// Make mobile-specific margin and padding classes.
@each $space in $spaceamounts {
  @each $side in $sides {
    @include mixins.touch {
      .m#{string.slice($side, 0, 1)}-#{$space}-mobile {
        margin-#{$side}: #{$space}px !important;
      }

      .p#{string.slice($side, 0, 1)}-#{$space}-mobile {
        padding-#{$side}: #{$space}px !important;
      }
    }
  }

  @include mixins.touch {
    .m-#{$space}-mobile {
      margin: #{$space}px !important;
    }

    .p-#{$space}-mobile {
      padding: #{$space}px !important;
    }
  }
}

.m-auto {
  margin: auto;
}
