/**
 * All of these mixins are for treating the safe area as if its 100%/100vw of
 * the screen.
 */

// horizontally pads out the unsafe areas
// similar to padding-left: 0, padding-right: 0
@mixin safe-area-horizontal-padding-to-remove-insets()
  padding-left: constant(safe-area-inset-left)
  padding-left: env(safe-area-inset-left)
  padding-right: constant(safe-area-inset-right)
  padding-right: env(safe-area-inset-right)

// horizontally pads out the unsafe areas and adds extra padding for mimicking non-unsafe layout
// similar to padding-left: 1rem, padding-right: 1rem (if $space = 1rem)
@mixin safe-area-horizontal-padding-to-remove-insets-plus($space)
  padding-left: calc(constant(safe-area-inset-left) + #{$space})
  padding-left: calc(env(safe-area-inset-left) + #{$space})
  padding-right: calc(constant(safe-area-inset-right) + #{$space})
  padding-right: calc(env(safe-area-inset-right) + #{$space})

// adds padding as a function of vw based on safe area only
// similar to padding: 2vw (where $percent = 0.02)
@mixin safe-area-padding-in-vw-percent($percent)
  padding: calc( ( 100vw - constant(safe-area-inset-left) - constant(safe-area-inset-right) ) * #{$percent} )
  padding: calc( ( 100vw - env(safe-area-inset-left) - env(safe-area-inset-right) ) * #{$percent} )

// adds vertical padding as a function of vw based on safe area only
// similar to padding: 2vw 0 (where $percent = 0.02)
@mixin safe-area-vertical-padding-in-vw-percent($percent)
  padding: calc( ( 100vw - constant(safe-area-inset-left) - constant(safe-area-inset-right) ) * #{$percent} ) 0
  padding: calc( ( 100vw - env(safe-area-inset-left) - env(safe-area-inset-right) ) * #{$percent} ) 0

// sets width as a function of vw based on safe area only
// similar to width: 2vw (where $percent = 0.02)
@mixin safe-area-width-in-vw-percent($percent)
  width: calc( ( 100vw - constant(safe-area-inset-left) - constant(safe-area-inset-right) ) * #{$percent} )
  width: calc( ( 100vw - env(safe-area-inset-left) - env(safe-area-inset-right) ) * #{$percent} )
