@import "mixins/tools.mixins";

// Immutable utility classes for spacing
$space-n: 0; // none
$space-s: rem(10); // small
$space-m: rem(20); // medium
$space-l: rem(30); // large
$space-x: rem(40); // extra
$space-xl: rem(50); // extra-large
$space-xxl: rem(60); // extra-extra-large

// format: .u-space-123
// 1 = [p]adding, [m]argin (padding excluded for now)
// 2 = [a]ll, [t]op, [r]ight, [b]ottom, [l]eft, [h]orizontal-axis, [v]ertical-axis
// 3 = [n]one, [s]mall, [m]edium, [l]arge, [x]extra, [xl]extra-large, [xxl]extra-extra-large

// top
.u-space-mtn, .u-space-mvn, .u-space-man {
  margin-top: $space-n !important;
}
.u-space-mts, .u-space-mvs, .u-space-mas {
  margin-top: $space-s !important;
}
.u-space-mtm, .u-space-mvm, .u-space-mam {
  margin-top: $space-m !important;
}
.u-space-mtl, .u-space-mvl, .u-space-mal {
  margin-top: $space-l !important;
}
.u-space-mtx, .u-space-mvx, .u-space-max {
  margin-top: $space-x !important;
}
.u-space-mtxl, .u-space-mvxl, .u-space-maxl {
  margin-top: $space-xl !important;
}
.u-space-mtxxl, .u-space-mvxxl, .u-space-maxxl {
  margin-top: $space-xxl !important;
}

// right
.u-space-mrn, .u-space-mhn, .u-space-man {
  margin-right: $space-n !important;
}
.u-space-mrs, .u-space-mhs, .u-space-mas {
  margin-right: $space-s !important;
}
.u-space-mrm, .u-space-mhm, .u-space-mam {
  margin-right: $space-m !important;
}
.u-space-mrl, .u-space-mhl, .u-space-mal {
  margin-right: $space-l !important;
}
.u-space-mrx, .u-space-mhx, .u-space-max {
  margin-right: $space-x !important;
}
.u-space-mrxl, .u-space-mhxl, .u-space-maxl {
  margin-right: $space-xl !important;
}
.u-space-mrxxl, .u-space-mhxxl, .u-space-maxxl {
  margin-right: $space-xxl !important;
}

// bottom
.u-space-mbn, .u-space-mvn, .u-space-man {
  margin-bottom: $space-n !important;
}
.u-space-mbs, .u-space-mvs, .u-space-mas {
  margin-bottom: $space-s !important;
}
.u-space-mbm, .u-space-mvm, .u-space-mam {
  margin-bottom: $space-m !important;
}
.u-space-mbl, .u-space-mvl, .u-space-mal {
  margin-bottom: $space-l !important;
}
.u-space-mbx, .u-space-mvx, .u-space-max {
  margin-bottom: $space-x !important;
}
.u-space-mbxl, .u-space-mvxl, .u-space-maxl {
  margin-bottom: $space-xl !important;
}
.u-space-mbxxl, .u-space-mvxxl, .u-space-maxxl {
  margin-bottom: $space-xxl !important;
}


// left
.u-space-mln, .u-space-mhn, .u-space-man {
  margin-left: $space-n !important;
}
.u-space-mls, .u-space-mhs, .u-space-mas {
  margin-left: $space-s !important;
}
.u-space-mlm, .u-space-mhm, .u-space-mam {
  margin-left: $space-m !important;
}
.u-space-mll, .u-space-mhl, .u-space-mal {
  margin-left: $space-l !important;
}
.u-space-mlx, .u-space-mhx, .u-space-max {
  margin-left: $space-x !important;
}
.u-space-mlxl, .u-space-mhxl, .u-space-maxl {
  margin-left: $space-xl !important;
}
.u-space-mlxxl, .u-space-mhxxl, .u-space-maxxl {
  margin-left: $space-xxl !important;
}
