/* Usefull - Margin */
////
/// @group UsefullClasses-Margin
/// Usefull - Margin

///
.margin {
	@each $type, $value in $osui-sizes {
		&-#{$type} {
			margin: var(--space-#{$type});
		}

		@each $osui-box-side in $osui-box-sides {
			&-#{$osui-box-side}-#{$type} {
				margin-#{$osui-box-side}: var(--space-#{$type});
			}
		}

		&-x-#{$type} {
			margin-left: var(--space-#{$type});
			margin-right: var(--space-#{$type});
		}

		&-y-#{$type} {
			margin-bottom: var(--space-#{$type});
			margin-top: var(--space-#{$type});
		}
	}

	&-auto {
		margin: 0 auto;
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	@each $type, $value in $osui-sizes {
		.margin {
			&-right-#{$type} {
				margin-left: var(--space-#{$type});
				margin-right: var(--space-none);
			}

			&-left-#{$type} {
				margin-left: var(--space-none);
				margin-right: var(--space-#{$type});
			}
		}
	}
}