// spacing
$space-unit: 6px;

$space-1: $space-unit / 2;
$space-2: $space-unit;
$space-3: $space-unit * 2;
$space-4: $space-unit * 3;

/////////////// layout ///////////////
.flex {
    display: flex;
}

.flex.center {
    align-items: center;
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex-spacer {
    flex: 1;
}

/////////////// margins ///////////////
.m0  { margin:        0 }
.mt0 { margin-top:    0 }
.mr0 { margin-right:  0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left:   0 }
.mx0 { margin-left:   0; margin-right:  0 }
.my0 { margin-top:    0; margin-bottom: 0 }

.m1  { margin:        $space-1 }
.mt1 { margin-top:    $space-1 }
.mr1 { margin-right:  $space-1 }
.mb1 { margin-bottom: $space-1 }
.ml1 { margin-left:   $space-1 }
.mx1 { margin-left:   $space-1; margin-right:  $space-1 }
.my1 { margin-top:    $space-1; margin-bottom: $space-1 }

.m2  { margin:        $space-2 }
.mt2 { margin-top:    $space-2 }
.mr2 { margin-right:  $space-2 }
.mb2 { margin-bottom: $space-2 }
.ml2 { margin-left:   $space-2 }
.mx2 { margin-left:   $space-2; margin-right:  $space-2 }
.my2 { margin-top:    $space-2; margin-bottom: $space-2 }

.m3  { margin:        $space-3 }
.mt3 { margin-top:    $space-3 }
.mr3 { margin-right:  $space-3 }
.mb3 { margin-bottom: $space-3 }
.ml3 { margin-left:   $space-3 }
.mx3 { margin-left:   $space-3; margin-right:  $space-3 }
.my3 { margin-top:    $space-3; margin-bottom: $space-3 }

.m4  { margin:        $space-4 }
.mt4 { margin-top:    $space-4 }
.mr4 { margin-right:  $space-4 }
.mb4 { margin-bottom: $space-4 }
.ml4 { margin-left:   $space-4 }
.mx4 { margin-left:   $space-4; margin-right:  $space-4 }
.my4 { margin-top:    $space-4; margin-bottom: $space-4 }

.mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
.mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
.mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
.mxn4 { margin-left: -$space-4; margin-right: -$space-4; }

.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto; }

/////////////// padding ///////////////
.p0  { padding: 0 }
.pt0 { padding-top: 0 }
.pr0 { padding-right: 0 }
.pb0 { padding-bottom: 0 }
.pl0 { padding-left: 0 }
.px0 { padding-left: 0; padding-right:  0 }
.py0 { padding-top: 0;  padding-bottom: 0 }

.p1  { padding:        $space-1 }
.pt1 { padding-top:    $space-1 }
.pr1 { padding-right:  $space-1 }
.pb1 { padding-bottom: $space-1 }
.pl1 { padding-left:   $space-1 }
.py1 { padding-top:    $space-1; padding-bottom: $space-1 }
.px1 { padding-left:   $space-1; padding-right:  $space-1 }

.p2  { padding:        $space-2 }
.pt2 { padding-top:    $space-2 }
.pr2 { padding-right:  $space-2 }
.pb2 { padding-bottom: $space-2 }
.pl2 { padding-left:   $space-2 }
.py2 { padding-top:    $space-2; padding-bottom: $space-2 }
.px2 { padding-left:   $space-2; padding-right:  $space-2 }

.p3  { padding:        $space-3 }
.pt3 { padding-top:    $space-3 }
.pr3 { padding-right:  $space-3 }
.pb3 { padding-bottom: $space-3 }
.pl3 { padding-left:   $space-3 }
.py3 { padding-top:    $space-3; padding-bottom: $space-3 }
.px3 { padding-left:   $space-3; padding-right:  $space-3 }

.p4  { padding:        $space-4 }
.pt4 { padding-top:    $space-4 }
.pr4 { padding-right:  $space-4 }
.pb4 { padding-bottom: $space-4 }
.pl4 { padding-left:   $space-4 }
.py4 { padding-top:    $space-4; padding-bottom: $space-4 }
.px4 { padding-left:   $space-4; padding-right:  $space-4 }