/* margin */

.m-0 {
	margin: 0;
}

.m-xs {
	margin: var(--space-xs);
}
.m-sm {
	margin: var(--space-sm);
}
.m-md {
	margin: var(--space-md);
}
.m-lg {
	margin: var(--space-lg);
}
.m-xl {
	margin: var(--space-xl);
}
.m-xxl {
	margin: var(--space-xxl);
}

.my-xs {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}

.my-sm {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.my-md {
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
}

.my-lg {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.my-xl {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.mx-xs {
	margin-left: var(--space-xs);
	margin-right: var(--space-xs);
}

.mx-sm {
	margin-left: var(--space-sm);
	margin-right: var(--space-sm);
}

.mx-md {
	margin-left: var(--space-md);
	margin-right: var(--space-md);
}

.mx-lg {
	margin-left: var(--space-lg);
	margin-right: var(--space-lg);
}

.mx-xl {
	margin-left: var(--space-xl);
	margin-right: var(--space-xl);
}

.mt-xs {
	margin-top: var(--space-xs);
}
.mt-sm {
	margin-top: var(--space-sm);
}
.mt-md {
	margin-top: var(--space-md);
}
.mt-lg {
	margin-top: var(--space-lg);
}
.mt-xl {
	margin-top: var(--space-xl);
}

.mb-xs {
	margin-bottom: var(--space-xs);
}
.mb-sm {
	margin-bottom: var(--space-sm);
}
.mb-md {
	margin-bottom: var(--space-md);
}
.mb-lg {
	margin-bottom: var(--space-lg);
}
.mb-xl {
	margin-bottom: var(--space-xl);
}

.ml-xs {
	margin-left: var(--space-xs);
}
.ml-sm {
	margin-left: var(--space-sm);
}
.ml-md {
	margin-left: var(--space-md);
}
.ml-lg {
	margin-left: var(--space-lg);
}
.ml-xl {
	margin-left: var(--space-xl);
}

.mr-xs {
	margin-right: var(--space-xs);
}
.mr-sm {
	margin-right: var(--space-sm);
}
.mr-md {
	margin-right: var(--space-md);
}
.mr-lg {
	margin-right: var(--space-lg);
}
.mr-xl {
	margin-right: var(--space-xl);
}

/* padding */

.p-0 {
	padding: 0;
}

.p-xs {
	padding: var(--space-xs);
}
.p-sm {
	padding: var(--space-sm);
}
.p-md {
	padding: var(--space-md);
}
.p-lg {
	padding: var(--space-lg);
}
.p-xl {
	padding: var(--space-xl);
}
.p-xxl {
	padding: var(--space-xxl);
}

.py-xs {
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
}

.py-sm {
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.py-md {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

.py-lg {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
}

.py-xl {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.px-xs {
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
}

.px-sm {
	padding-left: var(--space-sm);
	padding-right: var(--space-sm);
}

.px-md {
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.px-lg {
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.px-xl {
	padding-left: var(--space-xl);
	padding-right: var(--space-xl);
}

.pt-xs {
	padding-top: var(--space-xs);
}
.pt-sm {
	padding-top: var(--space-sm);
}
.pt-md {
	padding-top: var(--space-md);
}
.pt-lg {
	padding-top: var(--space-lg);
}
.pt-xl {
	padding-top: var(--space-xl);
}

.pb-xs {
	padding-bottom: var(--space-xs);
}
.pb-sm {
	padding-bottom: var(--space-sm);
}
.pb-md {
	padding-bottom: var(--space-md);
}
.pb-lg {
	padding-bottom: var(--space-lg);
}
.pb-xl {
	padding-bottom: var(--space-xl);
}

.pl-xs {
	padding-left: var(--space-xs);
}
.pl-sm {
	padding-left: var(--space-sm);
}
.pl-md {
	padding-left: var(--space-md);
}
.pl-lg {
	padding-left: var(--space-lg);
}
.pl-xl {
	padding-left: var(--space-xl);
}

.pr-xs {
	padding-right: var(--space-xs);
}
.pr-sm {
	padding-right: var(--space-sm);
}
.pr-md {
	padding-right: var(--space-md);
}
.pr-lg {
	padding-right: var(--space-lg);
}
.pr-xl {
	padding-right: var(--space-xl);
}

/*
* ------
* visibility: 
* ------
*/
.smx-hide {
	display: none !important;
}

/* MOBILE ONLY */
@media (min-width: 768px) {
	.smx-mobile-only {
		display: none !important;
	}
}

/* TABLET ONLY */
@media (max-width: 767px), (min-width: 1024px) {
	.smx-tablet-only {
		display: none !important;
	}
}

/* DESKTOP ONLY */
@media (max-width: 1023px) {
	.smx-desktop-only {
		display: none !important;
	}
}

/* TABLET AND UP */
@media (max-width: 767px) {
	.smx-tablet-up {
		display: none !important;
	}
}

/* TABLET AND DOWN */
@media (min-width: 1024px) {
	.smx-tablet-down {
		display: none !important;
	}
}