/* wc.common.hvgap.scss */
@import 'mixins-common';
// The styles which create hgap and vgap.
// See xslt/wc.common.getHVGap.xsl for changing the number of options or the pixel values at which the various classes
// get set.

// NOTE: Most layouts and WRow have div children. ListLayout/WList has li children.
// We can (at the moment) safely use the universal selector here but maybe not into the future. Even so, it has
// terrible performance so we are probably better off without it.

// Vaadin Scss compiler does not appear to handle multiple assignment so the simple each below has to be done a bit more
// verbosely.

@each $cl in $wc-gap-suffix-list {
	@if ($cl == sm) {
		$size: $wc-gap-small;
	}
	@else if  ($cl == med) {
		$size: $wc-gap-normal;
	}
	@else if  ($cl == lg) {
		$size: $wc-gap-large;
	}
	@else {
		$size: $wc-gap-xl;
	}

	.wc-hgap-#{$cl} {
		> div,
		> li,
		> ul,
		> span {
			padding-left: $size / 2;
			padding-right: $size / 2;
		 }
	}

	.wc-vgap-#{$cl} {
		> div + div,
		> li + li {
			margin-top: $size;
		 }
	}

	.wc-margin-all-#{$cl} {
		margin: $size;
	}

	.wc-margin-n-#{$cl} {
		margin-top: $size;
	}

	.wc-margin-e-#{$cl} {
		margin-right: $size;
	}

	.wc-margin-s-#{$cl} {
		margin-bottom: $size;
	}

	.wc-margin-w-#{$cl} {
		margin-left: $size;
	}

	.wc-pad-#{$cl} {
		padding: $size;
	}
}

@if ($wc-gap-reduce-when-narrow != -1) {
	// Reduce the gaps on narrow viewports.
	@include respond-phonelike {
		@each $cl in $wc-gap-suffix-list {
			@if ($cl == sm) {
				$size: $wc-phone-gap-small;
			}
			@else if  ($cl == med) {
				$size: $wc-phone-gap-normal;
			}
			@else if  ($cl == lg) {
				$size: $wc-phone-gap-large;
			}
			@else {
				$size: $wc-phone-gap-xl;
			}

			.wc-hgap-#{$cl} {
				> div,
				> ul,
				> li,
				> span {
					padding-left: $size / 2;
					padding-right: $size / 2;
				 }
			}

			@if ($cl != sm) {
				.wc-vgap-#{$cl} {
					> div + div,
					> li + li {
						margin-top: $wc-phone-gap-small;
					 }
				}
			}

			.wc-margin-all-#{$cl} {
				margin: $size;
			}

			.wc-margin-n-#{$cl} {
				margin-top: $size;
			}

			.wc-margin-e-#{$cl} {
				margin-right: $size;
			}

			.wc-margin-s-#{$cl} {
				margin-bottom: $size;
			}

			.wc-margin-w-#{$cl} {
				margin-left: $size;
			}

			.wc-pad-#{$cl} {
				padding: $size;
			}
		}
	}
}

.wc-hgap-sm,
.wc-hgap-med,
.wc-hgap-lg,
.wc-hgap-xl {
	> :first-child {
		padding-left: 0;
	}

	> :last-child {
		padding-right: 0;
	}
}
