@mixin mixPaddingMargin($i, $px) {
  // reusable code here
  .mt-#{$i} {
    margin-top: $px * 1px !important;
  }
  .mb-#{$i} {
    margin-bottom: $px * 1px !important;
  }
  .ms-#{$i} {
    margin-left: $px * 1px !important;
  }
  .me-#{$i} {
    margin-right: $px * 1px !important;
  }
  .mx-#{$i} {
    margin-left: $px * 1px !important;
    margin-right: $px * 1px !important;
  }
  .my-#{$i} {
    margin-top: $px * 1px !important;
    margin-bottom: $px * 1px !important;
  }
  .p-#{$i} {
    padding: $px * 1px !important;
  }
  .pt-#{$i} {
    padding-top: $px * 1px !important;
  }
  .pb-#{$i} {
    padding-bottom: $px * 1px !important;
  }
  .ps-#{$i} {
    padding-left: $px * 1px !important;
  }
  .pe-#{$i} {
    padding-right: $px * 1px !important;
  }
  .px-#{$i} {
    padding-left: $px * 1px !important;
    padding-right: $px * 1px !important;
  }
  .py-#{$i} {
    padding-top: $px * 1px !important;
    padding-bottom: $px * 1px !important;
  }
  .mt--#{$i} {
    margin-top: $px * -1px !important;
  }
  .mb--#{$i} {
    margin-bottom: $px * -1px !important;
  }
  .ms--#{$i} {
    margin-left: $px * -1px !important;
  }
  .me--#{$i} {
    margin-right: $px * -1px !important;
  }
  .mx--#{$i} {
    margin-left: $px * -1px !important;
    margin-right: $px * -1px !important;
  }
  .my--#{$i} {
    margin-top: $px * -1px !important;
    margin-bottom: $px * -1px !important;
  }
}
@mixin mixPosition($i, $px) {
  .top-#{$i} {
   top: $px * 1px !important;
  }
  .top--#{$i} {
    top: $px * -1px !important;
  }
  .right-#{$i} {
    right: $px * 1px !important;
  }
  .bottom-#{$i} {
    bottom: $px * 1px !important;
  }
  .bottom--#{$i} {
    bottom: $px * -1px !important;
  }
  .left-#{$i} {
    left: $px * 1px !important;
  }
}
$pxs: 0 0, 1 4, 2 8, 3 16, 4 24, 5 32, 6 48, 7 56, 8 62, 9 70, 10 78 ;
@each $i, $px in $pxs {
  @include mixPaddingMargin($i, $px);
  @include mixPosition($i, $px);
}

@each $weight in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
  [mat-weight='#{$weight}'] {
    font-weight: $weight !important;
  }
}

@mixin mixFontSize($i, $rem) {
  // reusable code here
  .fz-#{$i} {
   font-size: $rem * 1rem !important;
  }

}

$rems: 0 0.5, 1 0.75, 2 1, 3 1.25, 4 1.5, 5 1.75, 6 2, 7 2.25, 8 2.5, 9 2.75, 10 3;
@each $i,  $rem in  $rems {
  @include mixFontSize($i, $rem);
}