.wux-safe-area { --safe-area-inset-top: 44PX; --safe-area-inset-bottom: 34PX; --safe-area-multiple: 1; display: block; width: 100%; box-sizing: border-box } .wux-safe-area--position-top { padding-top: calc(var(--safe-area-inset-top) * var(--safe-area-multiple)) } @supports (padding-top:constant(safe-area-inset-top)) { .wux-safe-area--position-top.wux-safe-area--supports { padding-top: calc(constant(safe-area-inset-top) * var(--safe-area-multiple)) } } @supports (padding-top:env(safe-area-inset-top)) { .wux-safe-area--position-top.wux-safe-area--supports { padding-top: calc(env(safe-area-inset-top) * var(--safe-area-multiple)) } } .wux-safe-area--position-bottom { padding-bottom: calc(var(--safe-area-inset-bottom) * var(--safe-area-multiple)) } @supports (padding-bottom:constant(safe-area-inset-bottom)) { .wux-safe-area--position-bottom.wux-safe-area--supports { padding-bottom: calc(constant(safe-area-inset-bottom) * var(--safe-area-multiple)) } } @supports (padding-bottom:env(safe-area-inset-bottom)) { .wux-safe-area--position-bottom.wux-safe-area--supports { padding-bottom: calc(env(safe-area-inset-bottom) * var(--safe-area-multiple)) } }