/* PWA Status Bar Blur Effect */
body {
	--statusbar-bg-color: 255 255 255; /* Default white background */
}

/* Status bar overlay - positioned above viewport */
.pwa-statusbar {
	position: fixed;
	left: 0;
	right: 0;
	top: -80px;
	height: 80px;
	overflow: hidden;
	z-index: 9999;
	pointer-events: none;
	display: none; /* Hidden by default */
}

/* Blur effect using ::before pseudo-element */
.pwa-statusbar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 150%;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	background-color: rgb(var(--statusbar-bg-color) / 0.2);
}

/* Show blur effect when body has blur class */
body.statusbar-blur .pwa-statusbar {
	display: block;
}

/* Different background colors for different modes */
body.statusbar-bg-white {
	--statusbar-bg-color: 255 255 255;
}

body.statusbar-bg-black {
	--statusbar-bg-color: 0 0 0;
}

body.statusbar-bg-blue {
	--statusbar-bg-color: 37 99 235;
}

body.statusbar-bg-transparent {
	--statusbar-bg-color: 255 255 255;
}