@import "../styles/global-variables";

// icons
// put these on the <i> to create consistent spacing between icons and their text labels
// stylelint-disable declaration-no-important

.icon-left
{
  margin-right: $space-xs !important;
}

.icon-right
{
  margin-left: $space-xs !important;
}

// margin

.m-auto
{
  margin: auto !important;
}

.mx-auto
{
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-auto
{
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-auto
{
  margin-top: auto !important;
}

.mr-auto
{
  margin-right: auto !important;
}

.mb-auto
{
  margin-bottom: auto !important;
}

.ml-auto
{
  margin-left: auto !important;
}

.m-xs
{
  margin: $space-xs !important;
}

.mx-xs
{
  margin-right: $space-xs !important;
  margin-left: $space-xs !important;
}

.my-xs
{
  margin-top: $space-xs !important;
  margin-bottom: $space-xs !important;
}

.mt-xs
{
  margin-top: $space-xs !important;
}

.mr-xs
{
  margin-right: $space-xs !important;
}

.mb-xs
{
  margin-bottom: $space-xs !important;
}

.ml-xs
{
  margin-left: $space-xs !important;
}

.m-sm
{
  margin: $space-sm !important;
}

.mx-sm
{
  margin-right: $space-sm !important;
  margin-left: $space-sm !important;
}

.my-sm
{
  margin-top: $space-sm !important;
  margin-bottom: $space-sm !important;
}

.mt-sm
{
  margin-top: $space-sm !important;
}

.mr-sm
{
  margin-right: $space-sm !important;
}

.mb-sm
{
  margin-bottom: $space-sm !important;
}

.ml-sm
{
  margin-left: $space-sm !important;
}

.m-md
{
  margin: $space-md !important;
}

.mx-md
{
  margin-right: $space-md !important;
  margin-left: $space-md !important;
}

.my-md
{
  margin-top: $space-md !important;
  margin-bottom: $space-md !important;
}

.mt-md
{
  margin-top: $space-md !important;
}

.mr-md
{
  margin-right: $space-md !important;
}

.mb-md
{
  margin-bottom: $space-md !important;
}

.ml-md
{
  margin-left: $space-md !important;
}

.m-lg
{
  margin: $space-lg !important;
}

.mx-lg
{
  margin-right: $space-lg !important;
  margin-left: $space-lg !important;
}

.my-lg
{
  margin-top: $space-lg !important;
  margin-bottom: $space-lg !important;
}

.mt-lg
{
  margin-top: $space-lg !important;
}

.mr-lg
{
  margin-right: $space-lg !important;
}

.mb-lg
{
  margin-bottom: $space-lg !important;
}

.ml-lg
{
  margin-left: $space-lg !important;
}

// padding

.p-xs
{
  padding: $space-xs !important;
}

.px-xs
{
  padding-right: $space-xs !important;
  padding-left: $space-xs !important;
}

.py-xs
{
  padding-top: $space-xs !important;
  padding-bottom: $space-xs !important;
}

.pt-xs
{
  padding-top: $space-xs !important;
}

.pr-xs
{
  padding-right: $space-xs !important;
}

.pb-xs
{
  padding-bottom: $space-xs !important;
}

.pl-xs
{
  padding-left: $space-xs !important;
}

.p-sm
{
  padding: $space-sm !important;
}

.px-sm
{
  padding-right: $space-sm !important;
  padding-left: $space-sm !important;
}

.py-sm
{
  padding-top: $space-sm !important;
  padding-bottom: $space-sm !important;
}

.pt-sm
{
  padding-top: $space-sm !important;
}

.pr-sm
{
  padding-right: $space-sm !important;
}

.pb-sm
{
  padding-bottom: $space-sm !important;
}

.pl-sm
{
  padding-left: $space-sm !important;
}

.p-md
{
  padding: $space-md !important;
}

.px-md
{
  padding-right: $space-md !important;
  padding-left: $space-md !important;
}

.py-md
{
  padding-top: $space-md !important;
  padding-bottom: $space-md !important;
}

.pt-md
{
  padding-top: $space-md !important;
}

.pr-md
{
  padding-right: $space-md !important;
}

.pb-md
{
  padding-bottom: $space-md !important;
}

.pl-md
{
  padding-left: $space-md !important;
}

.p-lg
{
  padding: $space-lg !important;
}

.px-lg
{
  padding-right: $space-lg !important;
  padding-left: $space-lg !important;
}

.py-lg
{
  padding-top: $space-lg !important;
  padding-bottom: $space-lg !important;
}

.pt-lg
{
  padding-top: $space-lg !important;
}

.pr-lg
{
  padding-right: $space-lg !important;
}

.pb-lg
{
  padding-bottom: $space-lg !important;
}

.pl-lg
{
  padding-left: $space-lg !important;
}