/*------------------------------------
  Space
------------------------------------*/

.space-1 {
	padding-top: $space-1;
	padding-bottom: $space-1;

	&-top {
		padding-top: $space-1;
	}

	&-bottom {
		padding-bottom: $space-1;
	}
}

.space-2 {
	padding-top: $space-2;
	padding-bottom: $space-2;

	&-top {
		padding-top: $space-2;
	}

	&-bottom {
		padding-bottom: $space-2;
	}
}

.space-3 {
	padding-top: $space-3;
	padding-bottom: $space-3;

	&-top {
		padding-top: $space-3;
	}

	&-bottom {
		padding-bottom: $space-3;
	}
}

.space-4 {
	padding-top: $space-4;
	padding-bottom: $space-4;

	&-top {
		padding-top: $space-4;
	}

	&-bottom {
		padding-bottom: $space-4;
	}
}

.space-5 {
	padding-top: $space-5;
	padding-bottom: $space-5;

	&-top {
		padding-top: $space-5;
	}

	&-bottom {
		padding-bottom: $space-5;
	}
}

.space-0 {
	padding-top: 0;
	padding-bottom: 0;

	&-top {
		padding-top: 0;
	}

	&-bottom {
		padding-bottom: 0;
	}
}

// Small Devices
@include media-breakpoint-up(sm) {
	.space-3--sm {
		padding-top: $space-3;
		padding-bottom: $space-3;
	}

	.space-3-bottom--sm {
		padding-bottom: $space-3;
	}

	.space-4-top--sm {
		padding-top: $space-4;
	}

	.space-5--sm {
		padding-top: $space-5;
		padding-bottom: $space-5;
	}
}

// Medium Devices
@include media-breakpoint-up(md) {
	.space-2-bottom-0--md {
		padding-bottom: 0;
	}

	.space-3--md {
		padding-top: $space-3;
		padding-bottom: $space-3;
	}

	.space-3-top--md {
		padding-top: $space-3;
	}

	.space-3-bottom--md {
		padding-bottom: $space-3;
	}

	.space-4--md {
		padding-top: $space-4;
		padding-bottom: $space-4;
	}

	.space-4-top--md {
		padding-top: $space-4;
	}

	.space-5--md {
		padding-top: $space-5;
		padding-bottom: $space-5;
	}

	.space-5-top--md {
		padding-top: $space-5;
	}
}

// Large Devices
@include media-breakpoint-up(lg) {
	.space-1--lg {
		padding-top: $space-1;
		padding-bottom: $space-1;
	}

	.space-3--lg {
		padding-top: $space-3;
		padding-bottom: $space-3;
	}

	.space-3-top--lg {
		padding-top: $space-3;
	}

	.space-3-bottom--lg {
		padding-bottom: $space-3;
	}

	.space-4--lg {
		padding-top: $space-4;
		padding-bottom: $space-4;
	}

	.space-4-top--lg {
		padding-top: $space-4;
	}

	.space-4-bottom--lg {
		padding-bottom: $space-4;
	}

	.space-5--lg {
		padding-top: $space-5;
		padding-bottom: $space-5;
	}

	.space-5-top--lg {
		padding-top: $space-5;
	}

	.space-0--lg {
		padding-top: 0;
		padding-bottom: 0;
	}

	.space-0-top--lg {
		padding-top: 0;
	}

	.space-0-bottom--lg {
		padding-bottom: 0;
	}
}

// Extra Large Devices
@include media-breakpoint-up(xl) {
	.space-3-bottom--xl {
		padding-bottom: $space-3;
	}

	.space-4-top--xl {
		padding-top: $space-4;
	}
}