/* -------------------------- */
/* Standard horizontal spacing */
/* -------------------------- */
.moon-hspacing {
	& {
		white-space: nowrap;
	}
	& > * {
		display: inline-block;
		vertical-align: middle;
		margin: 0 @moon-grid-gutter-width/2;
	}
	&.top > * {
		vertical-align: top;
	}
	& > :first-child,
	& > :first-child.moon-contextual-popup-decorator :first-child {
		margin-left: 0;
	}
	.enyo-locale-right-to-left & > :first-child {
		margin-left: @moon-grid-gutter-width/2;
		margin-right: 0;
	}
	& > :last-child,
	& > :last-child.moon-contextual-popup-decorator :first-child {
		margin-right: 0;
	}
	.enyo-locale-right-to-left & > :last-child {
		margin-right: @moon-grid-gutter-width/2;
		margin-left: 0;
	}
}

/* -------------------------- */
/* Standard vertical spacing */
/* -------------------------- */
.moon-vspacing {
	& > * {
		display: block;
		margin: @moon-grid-gutter-width/2 0;
	}
	& > :first-child {
		margin-top: 0;
	}
	& > :last-child {
		margin-bottom: 0;
	}
}

/* -------------------------- */
/* Variable vertical spacing  */
/* -------------------------- */

.moon-vspacing-mixin(@size) {
	> .moon-item:not(.moon-formcheckbox-item),
	> .moon-expandable-list-item:not(.open) .moon-item,
	> .moon-expandable-list-item.open {
		padding-bottom: @size;
	}
	> .moon-button,
	> .moon-input-decorator,
	> .moon-formcheckbox-item {
		margin-top: @size/2;
		margin-bottom: @size;
	}
}

.moon-vspacing-s {
	.moon-vspacing-mixin(9px);
}
.moon-vspacing-m {
	.moon-vspacing-mixin(18px);
}
.moon-vspacing-l {
	.moon-vspacing-mixin(42px);
}
