@use "../utilities/" as *;

// =================== //
// Margins             //
// =================== //

.m {
	// ------- All Sides ------- //
	&-0 {
		margin: 0;
	}

	// ------- Inline Axis ------- //
	&x-0 {
		margin-inline: 0;
	}
	&x-18 {
		margin-inline: rem(18);
	}

	&y-0 {
		margin-block: 0;
	}
	&y-18 {
		margin-block: rem(18);
	}

	// ------- Top Side ------- //
	&t-0 {
		margin-top: 0;
	}
	&t-18 {
		margin-top: rem(18);
	}
	&t-25 {
		margin-top: rem(25);
	}
	&t-30 {
		margin-top: rem(30);
	}
	&t-40 {
		margin-top: rem(40);
	}
	&t-50 {
		margin-top: rem(50);
	}
	&t-100 {
		margin-top: var(--space-100);
	}
	&t-200 {
		margin-top: var(--space-200);
	}
	&t-300 {
		margin-top: var(--space-300);
	}
	&t-400 {
		margin-top: var(--space-400);
	}
	&t-500 {
		margin-top: var(--space-500);
	}
	&t-600 {
		margin-top: var(--space-600);
	}
	&t-700 {
		margin-top: var(--space-700);
	}
	&t-800 {
		margin-top: var(--space-800);
	}
	&t-900 {
		margin-top: var(--space-900);
	}
}

// =================== //
// Padding             //
// =================== //

.p {
	// ------- All Sides ------- //
	&-0 {
		padding: 0;
	}
	&-100 {
		padding: var(--space-100);
	}
	&-200 {
		padding: var(--space-200);
	}
	&-300 {
		padding: var(--space-300);
	}
	&-400 {
		padding: var(--space-400);
	}
	&-500 {
		padding: var(--space-500);
	}
	&-600 {
		padding: var(--space-600);
	}
	&-700 {
		padding: var(--space-700);
	}
	&-800 {
		padding: var(--space-800);
	}
	&-900 {
		padding: var(--space-900);
	}

	// ------- Inline Axis ------- //
	&x-0 {
		padding-inline: 0;
	}
	&x-100 {
		padding-inline: var(--space-100);
	}
	&x-200 {
		padding-inline: var(--space-200);
	}
	&x-300 {
		padding-inline: var(--space-300);
	}
	&x-400 {
		padding-inline: var(--space-400);
	}
	&x-500 {
		padding-inline: var(--space-500);
	}
	&x-600 {
		padding-inline: var(--space-600);
	}
	&x-700 {
		padding-inline: var(--space-700);
	}
	&x-800 {
		padding-inline: var(--space-800);
	}
	&x-900 {
		padding-inline: var(--space-900);
	}

	// ------- Block Axis ------- //
	&y-100 {
		padding-block: var(--space-100);
	}
	&y-200 {
		padding-block: var(--space-200);
	}
	&y-300 {
		padding-block: var(--space-300);
	}
	&y-400 {
		padding-block: var(--space-400);
	}
	&y-500 {
		padding-block: var(--space-500);
	}
	&y-600 {
		padding-block: var(--space-600);
	}
	&y-700 {
		padding-block: var(--space-700);
	}
	&y-800 {
		padding-block: var(--space-800);
	}
	&y-900 {
		padding-block: var(--space-900);
	}
}