// | variable      | size  | calculation     |
// |---------------|-------|-----------------|
// | $spacing--xxs |  5px  | $baseline * 0.5 |
// | $spacing--xs  | 10px  | $baseline * 1   |
// | $spacing--s   | 20px  | $baseline * 2   |
// | $spacing--m   | 30px  | $baseline * 3   |
// | $spacing--l   | 50px  | $baseline * 5   |
// | $spacing--xl  | 80px  | $baseline * 8   |
// | $spacing--xxl | 130px | $baseline * 13  |

// margin

.m {
  &-xxs {margin: $spacing--xxs;}
  &-xs {margin: $spacing--xs;}
  &-s {margin: $spacing--s;}
  &-m {margin: $spacing--m;}
  &-l {margin: $spacing--l;}
  &-xl {margin: $spacing--xl;}
  &-xxl {margin: $spacing--xxl;}
}

.mb {
  &-xxs {margin-bottom: $spacing--xxs;}
  &-xs {margin-bottom: $spacing--xs;}
  &-s {margin-bottom: $spacing--s;}
  &-m {margin-bottom: $spacing--m;}
  &-l {margin-bottom: $spacing--l;}
  &-xl {margin-bottom: $spacing--xl;}
  &-xxl {margin-bottom: $spacing--xxl;}
}

.ml {
  &-xxs {margin-left: $spacing--xxs;}
  &-xs {margin-left: $spacing--xs;}
  &-s {margin-left: $spacing--s;}
  &-m {margin-left: $spacing--m;}
  &-l {margin-left: $spacing--l;}
  &-xl {margin-left: $spacing--xl;}
  &-xxl {margin-left: $spacing--xxl;}
}

.mr {
  &-xxs {margin-right: $spacing--xxs;}
  &-xs {margin-right: $spacing--xs;}
  &-s {margin-right: $spacing--s;}
  &-m {margin-right: $spacing--m;}
  &-l {margin-right: $spacing--l;}
  &-xl {margin-right: $spacing--xl;}
  &-xxl {margin-right: $spacing--xxl;}
}

.mt {
  &-xxs {margin-top: $spacing--xxs;}
  &-xs {margin-top: $spacing--xs;}
  &-s {margin-top: $spacing--s;}
  &-m {margin-top: $spacing--m;}
  &-l {margin-top: $spacing--l;}
  &-xl {margin-top: $spacing--xl;}
  &-xxl {margin-top: $spacing--xxl;}

  &-15 {margin-top: $baseline * 1.5;}
}

.mx {
  &-xxs {margin-left: $spacing--xxs; margin-right: $spacing--xxs;}
  &-xs {margin-left: $spacing--xs; margin-right: $spacing--xs;}
  &-s {margin-left: $spacing--s; margin-right: $spacing--s;}
  &-m {margin-left: $spacing--m; margin-right: $spacing--m;}
  &-l {margin-left: $spacing--l; margin-right: $spacing--l;}
  &-xl {margin-left: $spacing--xl; margin-right: $spacing--xl;}
  &-xxl {margin-left: $spacing--xxl; margin-right: $spacing--xxl;}
}

.my {
  &-xxs {margin-bottom: $spacing--xxs; margin-top: $spacing--xxs;}
  &-xs {margin-bottom: $spacing--xs; margin-top: $spacing--xs;}
  &-s {margin-bottom: $spacing--s; margin-top: $spacing--s;}
  &-m {margin-bottom: $spacing--m; margin-top: $spacing--m;}
  &-l {margin-bottom: $spacing--l; margin-top: $spacing--l;}
  &-xl {margin-bottom: $spacing--xl; margin-top: $spacing--xl;}
  &-xxl {margin-bottom: $spacing--xxl; margin-top: $spacing--xxl;}
}

// padding

.p {
  &-xxs {padding: $spacing--xxs;}
  &-xs {padding: $spacing--xs;}
  &-s {padding: $spacing--s;}
  &-m {padding: $spacing--m;}
  &-l {padding: $spacing--l;}
  &-xl {padding: $spacing--xl;}
  &-xxl {padding: $spacing--xxl;}

  &-15 {padding: $baseline * 1.5;}
}

.pb {
  &-xxs {padding-bottom: $spacing--xxs;}
  &-xs {padding-bottom: $spacing--xs;}
  &-s {padding-bottom: $spacing--s;}
  &-m {padding-bottom: $spacing--m;}
  &-l {padding-bottom: $spacing--l;}
  &-xl {padding-bottom: $spacing--xl;}
  &-xxl {padding-bottom: $spacing--xxl;}

  &-15 {padding-bottom: $baseline * 1.5;}
}

.pl {
  &-xxs {padding-left: $spacing--xxs;}
  &-xs {padding-left: $spacing--xs;}
  &-s {padding-left: $spacing--s;}
  &-m {padding-left: $spacing--m;}
  &-l {padding-left: $spacing--l;}
  &-xl {padding-left: $spacing--xl;}
  &-xxl {padding-left: $spacing--xxl;}

  &-25 {padding-left: $baseline * 2.5;}
}

.pr {
  &-xxs {padding-right: $spacing--xxs;}
  &-xs {padding-right: $spacing--xs;}
  &-s {padding-right: $spacing--s;}
  &-m {padding-right: $spacing--m;}
  &-l {padding-right: $spacing--l;}
  &-xl {padding-right: $spacing--xl;}
  &-xxl {padding-right: $spacing--xxl;}
}

.pt {
  &-xxs {padding-top: $spacing--xxs;}
  &-xs {padding-top: $spacing--xs;}
  &-s {padding-top: $spacing--s;}
  &-m {padding-top: $spacing--m;}
  &-l {padding-top: $spacing--l;}
  &-xl {padding-top: $spacing--xl;}
  &-xxl {padding-top: $spacing--xxl;}

  &-15 {padding-top: $baseline * 1.5;}
}

.px {
  &-xxs {padding-left: $spacing--xxs; padding-right: $spacing--xxs;}
  &-xs {padding-left: $spacing--xs; padding-right: $spacing--xs;}
  &-s {padding-left: $spacing--s; padding-right: $spacing--s;}
  &-m {padding-left: $spacing--m; padding-right: $spacing--m;}
  &-l {padding-left: $spacing--l; padding-right: $spacing--l;}
  &-xl {padding-left: $spacing--xl; padding-right: $spacing--xl;}
  &-xxl {padding-left: $spacing--xxl; padding-right: $spacing--xxl;}
}

.py {
  &-xxs {padding-bottom: $spacing--xxs; padding-top: $spacing--xxs;}
  &-xs {padding-bottom: $spacing--xs; padding-top: $spacing--xs;}
  &-s {padding-bottom: $spacing--s; padding-top: $spacing--s;}
  &-m {padding-bottom: $spacing--m; padding-top: $spacing--m;}
  &-l {padding-bottom: $spacing--l; padding-top: $spacing--l;}
  &-xl {padding-bottom: $spacing--xl; padding-top: $spacing--xl;}
  &-xxl {padding-bottom: $spacing--xxl; padding-top: $spacing--xxl;}

  &-15 {padding-bottom: $baseline * 1.5; padding-top: $baseline * 1.5;}
}