const SAFE_AREA_SIDES = [
  'top',
  'right',
  'bottom',
  'left'
] as const;

export type SafeAreaSide = (typeof SAFE_AREA_SIDES)[number];

/** CSS value chain for one safe-area inset (Capacitor vars with env() fallback). */
export function getSafeAreaInsetCSSValue(side: SafeAreaSide): string {
  return `var(--safe-area-inset-${side}, env(safe-area-inset-${side}, 0px))`;
}

/** Apply default safe-area CSS variables when the document root is available. */
export function applyMobileSafeAreaDefaults(root: HTMLElement | null = typeof document === 'undefined'
  ? null
  : document.documentElement): void {
  if (!root?.style) {
    return;
  }

  for (const side of SAFE_AREA_SIDES) {
    const property = `--safe-area-inset-${side}`;

    if (!root.style.getPropertyValue(property)) {
      root.style.setProperty(property, '0px');
    }
  }
}
