// Top / Right / Bottom / Left
// $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) {
	.inset-#{$name} { inset: var($varName); }
	.inset-x-#{$name} {
		left: var($varName);
		right: var($varName);
	}
	.inset-y-#{$name} {
		top: var($varName);
		bottom: var($varName);
	}
	.start-#{$name} { inset-inline-start: var($varName); }
	.end-#{$name} { inset-inline-end: var($varName); }
	.top-#{$name} { top: var($varName); }
	.right-#{$name} { right: var($varName); }
	.bottom-#{$name} { bottom: var($varName); }
	.left-#{$name} { left: var($varName); }
	
	
	.-top-#{$name} { top: calc(var($varName) * -1); }
	.-right-#{$name} { right: calc(var($varName) * -1); }
	.-bottom-#{$name} { bottom: calc(var($varName) * -1); }
	.-left-#{$name} { left: calc(var($varName) * -1); }
}

@include setPxs($pxNames);
@include setPcts($pctNames);

$morePcts: auto, full;
@include setPcts($morePcts);


.top-safe {
	top: calc(var(--window-top) + var(--status-bar-height) + constant(safe-area-inset-top));
	top: calc(var(--window-top) + var(--status-bar-height) + env(safe-area-inset-top));
}

.right-safe {
	right: calc(constant(safe-area-inset-right));
	right: calc(env(safe-area-inset-right));
}

.bottom-safe {
	bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
	bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
}

.left-safe {
	left: calc(constant(safe-area-inset-left));
	left: calc(env(safe-area-inset-left));
}