@import (less) './variables.less';

//sizing and spacing tachyons
.text-width {
    max-width: @md;
    padding: 0 @s16;
    margin-left: auto;
    margin-right: auto;
}

.mb-xxs {margin-bottom: @s4;}
.mb-xs {margin-bottom: @s8;}
.mb-sm {margin-bottom: @s16;}
.mb-md {margin-bottom: @s24;}
.mb-lg {margin-bottom: @s32;}
.mb-xl {margin-bottom: @s40;}
.mb-xxl {margin-bottom: @s48;}
.mb-auto {margin-bottom: auto;}

.mt-xxs {margin-top: @s4;}
.mt-xs {margin-top: @s8;}
.mt-sm {margin-top: @s16;}
.mt-md {margin-top: @s24;}
.mt-lg {margin-top: @s32;}
.mt-xl {margin-top: @s40;}
.mt-xxl {margin-top: @s48;}
.mt-auto {margin-top: auto;}

.mr-xxs {margin-right: @s4;}
.mr-xs {margin-right: @s8;}
.mr-sm {margin-right: @s16;}
.mr-md {margin-right: @s24;}
.mr-lg {margin-right: @s32;}
.mr-xl {margin-right: @s40;}
.mr-xxl {margin-right: @s48;}
.mr-auto {margin-right: auto;}

.ml-xxs {margin-left: @s4;}
.ml-xs {margin-left: @s8;}
.ml-sm {margin-left: @s16;}
.ml-md {margin-left: @s24;}
.ml-lg {margin-left: @s32;}
.ml-xl {margin-left: @s40;}
.ml-xxl {margin-left: @s48;}
.ml-auto {margin-left: auto;}

.ma-xxs {margin: @s4;}
.ma-xs {margin: @s8;}
.ma-sm {margin: @s16;}
.ma-md {margin: @s24;}
.ma-lg {margin: @s32;}
.ma-xl {margin: @s40;}
.ma-xxl {margin: @s48;}
.ma-auto {margin: auto;}

//padding
.pb-xxs {padding-bottom: @s4;}
.pb-xs {padding-bottom: @s8;}
.pb-sm {padding-bottom: @s16;}
.pb-md {padding-bottom: @s24;}
.pb-lg {padding-bottom: @s32;}
.pb-xl {padding-bottom: @s40;}
.pb-xxl {padding-bottom: @s48;}

.pt-xxs {padding-top: @s4;}
.pt-xs {padding-top: @s8;}
.pt-sm {padding-top: @s16;}
.pt-md {padding-top: @s24;}
.pt-lg {padding-top: @s32;}
.pt-xl {padding-top: @s40;}
.pt-xxl {padding-top: @s48;}

.pr-xxs {padding-right: @s4;}
.pr-xs {padding-right: @s8;}
.pr-sm {padding-right: @s16;}
.pr-md {padding-right: @s24;}
.pr-lg {padding-right: @s32;}
.pr-xl {padding-right: @s40;}
.pr-xxl {padding-right: @s48;}

.pl-xxs {padding-left: @s4;}
.pl-xs {padding-left: @s8;}
.pl-sm {padding-left: @s16;}
.pl-md {padding-left: @s24;}
.pl-lg {padding-left: @s32;}
.pl-xl {padding-left: @s40;}
.pl-xxl {padding-left: @s48;}

.pa-xxs {padding: @s4;}
.pa-xs {padding: @s8;}
.pa-sm {padding: @s16;}
.pa-md {padding: @s24;}
.pa-lg {padding: @s32;}
.pa-xl {padding: @s40;}
.pa-xxl {padding: @s48;}

.mw-xs {max-width: @xs;}
.mw-sm {max-width: @sm;}
.mw-md {max-width: @md;}
.mw-lg {max-width: @lg;}
.mw-xl {max-width: @xl;}
.mw-100 {max-width: 100%;}

//alignment
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}


// accessibility styles from https://github.com/mike-engel/a11y-css-reset/
/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
.visually-hidden() {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
.plain-list() {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  padding-left: 0;
}