// Space Between
$pxNames: '0' ,'px' ,'0-5' ,'1' ,'1-5' ,'2' ,'2-5' ,'3' ,'3-5' ,'4' ,'5' ,'6' ,'7' ,'8' ,'9' ,'10' ,'11' ,'12' ,'14' ,'16' ,'20' ,'24' ,'28' ,'32' ,'36' ,'40' ,'44' ,'48' ,'52' ,'56' ,'60' ,'64' ,'72' ,'80' ,'96';
$pctNames: '1_2' ,'1_3' ,'2_3' ,'1_4' ,'2_4' ,'3_4' ,'1_5' ,'2_5' ,'3_5' ,'4_5' ,'1_6' ,'2_6' ,'3_6' ,'4_6' ,'5_6' ,'1_12' ,'2_12' ,'3_12' ,'4_12' ,'5_12' ,'6_12' ,'7_12' ,'8_12' ,'9_12' ,'10_12' ,'11_12';

@mixin setPxs($pxs) {
	@each $name in $pxs{
		$varName: --rpx-#{$name};
		@include render($name, $varName);
	}
}

@mixin setPcts($pxs) {
	@each $name in $pxs{
		$varName: --percent-#{$name};
		@include render($name, $varName);
	}
}


@mixin render($name, $varName) {
	// H5 支持 ~ :not
	// .space-x-#{$name} { 
	// 	--space-x-reverse: 0;
	// 	& > :not([hidden])~:not([hidden]) {
	// 		margin-right: calc(var($varName) * var(--space-x-reverse));
	// 		margin-left: calc(var($varName) * calc(1 - var(--space-x-reverse)));
	// 	}
	// }
	// .space-y-#{$name} {
	// 	--space-y-reverse: 0;
	// 	& > :not([hidden])~:not([hidden]) {
	// 		margin-bottom: calc(var($varName) * var(--space-y-reverse));
	// 		margin-top: calc(var($varName) * calc(1 - var(--space-y-reverse)));
	// 	}
	// }
	
	
	.space-x-#{$name} {
		& > view + view, & > text + text, & > navigator + navigator  {
			margin-left: calc(var($varName) * calc(1 - var(--space-x-reverse)));
			margin-right: calc(var($varName) * var(--space-x-reverse));
		}
	}
	.space-y-#{$name} {
		& > view + view, & > text + text, & > navigator + navigator  {
			margin-top: calc(var($varName) * calc(1 - var(--space-y-reverse)));
			margin-bottom: calc(var($varName) * var(--space-y-reverse));
		}
	}
}

[class*='space-'] { 
	--space-x-reverse: 0; 
	--space-y-reverse: 0; 
}

@include setPxs($pxNames);

.space-x-reverse {
	--space-x-reverse: 1;
}

.space-y-reverse {
	--space-y-reverse: 1;
}