[data-glass-surface] {
	--glass-tint-opacity: 0.05;
	--glass-tint-color: rgb(255 255 255 / var(--glass-tint-opacity));
	--glass-blur: 10px;
	--glass-saturation: 1.45;
	isolation: isolate;
	position: relative;
	z-index: 1;
}

[data-glass-profile="subtle"] {
	--glass-tint-opacity: 0.035;
	--glass-blur: 7px;
	--glass-saturation: 1.25;
}

[data-glass-profile="strong"] {
	--glass-tint-opacity: 0.08;
	--glass-blur: 16px;
	--glass-saturation: 1.65;
}

/* Bricks builder preview and no-JavaScript fallback. */
[data-glass-surface]:not([data-glass-state]) {
	background: var(--glass-tint-color) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

[data-glass-surface][data-glass-state] {
	background: transparent !important;
}

[data-glass-surface][data-glass-state] > *:not([data-glass-layer]) {
	position: relative;
	z-index: 3;
}

[data-glass-surface] > [data-glass-layer] {
	border-radius: inherit;
	inset: 0;
	pointer-events: none;
	position: absolute;
}

[data-glass-surface] > [data-glass-layer="lens"] {
	z-index: 1;
}

[data-glass-surface] > [data-glass-layer="tint"] {
	background: var(--glass-tint-color);
	z-index: 2;
}

[data-glass-surface][data-glass-shadow="true"] > [data-glass-layer="tint"] {
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.1), 0 0 0 0.5px rgb(0 0 0 / 0.05);
}

[data-glass-surface][data-glass-state="fallback"] > [data-glass-layer="lens"],
[data-glass-surface][data-glass-state="css"] > [data-glass-layer="lens"] {
	background: transparent !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
	opacity: 1 !important;
}