glass-effect.css

/* ===================== GLASS EFFECT =========================== */

--backgroundColor-surface-container: 22 23 24;
.bg-surface-container {
    background-color: rgb(var(--backgroundColor-surface-container) / .5);
}


--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
	
	
.backdrop-blur-\[40px\], .backdrop-blur-glass {
    --tw-backdrop-blur: blur(40px);
    
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}


--backgroundColor-state-enabled: 56 59 61;
--backgroundColor-state-hover: 110 115 119;
--backgroundColor-state-pressed: 152 158 164;
--backgroundColor-state-active: 60 64 67;
--backgroundColor-state-disabled: 22 23 24;
--backgroundColor-state-plain: 0 0 0;

.bg-state-enabled {
    background-color: rgb(var(--backgroundColor-state-enabled) / .575);
}

.hover\:bg-state-hover:hover {
    background-color: rgb(var(--backgroundColor-state-hover) / .751);
}