<template>
	<view class="w-safe-area" :style="{'--w-top':$w.top+'px','--w-status':$w.statusBarHeight+'px','--w-right':$w.right+'px','--w-bottom':$w.bottom+'px','--w-left':$w.left+'px'}">
		<slot></slot>
	</view>
</template>
<script setup>

</script>
<style lang="scss" scoped>
	.w-safe-area {
		position: var(--position,fixed);
		left: calc(var(--left,0px) + var(--w-left));
		top: calc(var(--top,0px) + var(--w-top));
		right: calc(var(--right,0px) + var(--w-right));
		bottom: calc(var(--bottom,0px) + var(--w-bottom));
		z-index: calc(var(--z-index,var(--w-z-index)) - 1);
	}
</style>