/* 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.

// hgap
// Vaadin Scss compiler cannot handle multiple assignment so the simple each below has to be done a bit more verbosely.
// @each $gap, $size in (sm: $vhap-small, med: $wc-gap-normal, lg: $wc-gap-large, xl: $wc-gap-xl) {
// 	.wc-hgap-#{$gap} > * {
// 		padding-left: $size / 2;
// 		padding-right: $size / 2;
// 	}
//
// 	.wc-vgap-#{$gap} {
// 		> div + div,
// 		> li + li {
// 			margin-top: $size;
// 		}
// 	}
// }

// The list of class suffixes. There is no point rewriting this unless you rewrite the XSLT.
$wc-gap-suffix-list: sm, med, lg, xl !default;

@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;
	}
}

@include respond-phonelike { // reduce the gaps.
	@each $cl in $wc-gap-suffix-list {
		@if ($cl == sm) {
			$size: $wc-gap-small / 2;
		}
		@else if  ($cl == med) {
			$size: $wc-gap-small;
		}
		@else {
			$size: $wc-gap-normal;
		}

		.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-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-hgap-sm,
.wc-hgap-med,
.wc-hgap-lg,
.wc-hgap-xl {
	> :first-child {
		padding-left: 0;
	}

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