/*  Margin & Padding view-height & view-width */
@for $i from 0 through 100 {
  .m-#{$i} {
    margin: #{$i}px !important;
  }

  .mt-#{$i} {
    margin-top: #{$i}px !important;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml-#{$i} {
    margin-left: #{$i}px !important;
  }

  .mr-#{$i} {
    margin-right: #{$i}px !important;
  }

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

  .pt-#{$i} {
    padding-top: #{$i}px !important;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl-#{$i} {
    padding-left: #{$i}px !important;
  }

  .pr-#{$i} {
    padding-right: #{$i}px !important;
  }

  .vh-#{$i} {
    height: #{$i}vh !important;
  }

  .vw-#{$i} {
    width: #{$i}vw !important;
  }

  .font-#{$i} {
    font-size: #{$i}px !important;
  }
}

$spacing-values: (
  112: 112px,
  128: 128px,
  144: 144px,
  160: 160px,
  176: 176px,
  192: 192px,
  208: 208px,
  220: 220px,
  224: 224px,
  240: 240px,
  256: 256px,
  288: 288px,
  320: 320px,
  384: 384px,
  440: 440px,
);

@each $key, $value in $spacing-values {
  .pl-#{$key} {
    padding-left: #{$value} !important;
  }
  .pr-#{$key} {
    padding-right: #{$value} !important;
  }
  .pt-#{$key} {
    padding-top: #{$value} !important;
  }
  .pb-#{$key} {
    padding-bottom: #{$value} !important;
  }

  .ml-#{$key} {
    margin-left: #{$value} !important;
  }
  .mr-#{$key} {
    margin-right: #{$value} !important;
  }
  .mt-#{$key} {
    margin-top: #{$value} !important;
  }
  .mb-#{$key} {
    margin-bottom: #{$value} !important;
  }
}

/* Default height & width */
@for $i from 0 through 300 {
  .height-#{$i} {
    height: #{$i}px !important;
  }

  .width-#{$i} {
    width: #{$i}px !important;
  }

  .dimension-#{$i} {
    height: #{$i}px !important;
    width: #{$i}px !important;
  }
}

.height-auto {
  height: auto !important;
}

.width-auto {
  width: auto !important;
}

/* Deafult z-index and font-weight*/
@for $i from 0 through 10 {
  .z-index-#{$i} {
    z-index: #{$i} !important;
  }

  .font-weight-#{$i*100} {
    font-weight: #{$i * 100} !important;
  }
}

.mx-auto {
  margin: 0 auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}