@import './variables.css';

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table
}
.clearfix:after { clear: both }

.zNeg { z-index: -1 }
.z1   { z-index:  1 }
.z2   { z-index:  2 }
.z3   { z-index:  3 }
.z4   { z-index:  4 }

/*Whitespace/margin/padding*/

.marg-0   { margin:        0 }
.marg-t-0 { margin-top:    0 }
.marg-r-0 { margin-right:  0 }
.marg-b-0 { margin-bottom: 0 }
.marg-l-0 { margin-left:   0 }

.marg-half		{ margin:		var(--space-0-25) }
.marg-t-half	{ margin-top:	var(--space-0-25) }
.marg-r-half	{ margin-right:	var(--space-0-25) }
.marg-b-half	{ margin-bottom:var(--space-0-25) }
.marg-l-half	{ margin-left:	var(--space-0-25) }

.marg-1   { margin:        var(--space-1) }
.marg-t-1 { margin-top:    var(--space-1) }
.marg-r-1 { margin-right:  var(--space-1) }
.marg-b-1 { margin-bottom: var(--space-1) }
.marg-l-1 { margin-left:   var(--space-1) }

.marg-b-less-1px { margin-bottom: -1px }

.marg-2   { margin:        var(--space-2) }
.marg-t-2 { margin-top:    var(--space-2) }
.marg-r-2 { margin-right:  var(--space-2) }
.marg-b-2 { margin-bottom: var(--space-2) }
.marg-l-2 { margin-left:   var(--space-2) }

.marg-3   { margin:        var(--space-3) }
.marg-t-3 { margin-top:    var(--space-3) }
.marg-r-3 { margin-right:  var(--space-3) }
.marg-b-3 { margin-bottom: var(--space-3) }
.marg-l-3 { margin-left:   var(--space-3) }

.marg-4  { margin:        var(--space-4) }
.marg-t-4 { margin-top:    var(--space-4) }
.marg-r-4 { margin-right:  var(--space-4) }
.marg-b-4 { margin-bottom: var(--space-4) }
.marg-l-4 { margin-left:   var(--space-4) }

.marg-h-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.marg-h-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.marg-h-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.marg-h-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.marg-h-auto { margin-left: auto; margin-right: auto; }

.button-marg-1 { margin:	0 3px 0 0; }

.pad-0 { padding: 0 }

.pad-0-25 {padding: var(--space-0-25) };
.pad-v-0-25 {padding-top: var(--space-0-25); padding-bottom: var(--space-0-25) }
.pad-h-0-25 {padding-left: var(--space-0-25); padding-right: var(--space-0-25) }

.pad-1   { padding:       var(--space-1) }
.pad-v-1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
.pad-h-1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

.pad-2   { padding:       var(--space-2) }
.pad-v-2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
.pad-h-2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

.pad-3   { padding:       var(--space-3) }
.pad-v-3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
.pad-h-3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

.pad-4   { padding:       var(--space-4) }
.pad-v-4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
.pad-h-4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

.button-pad-1 { padding:  var(--button-padding) }