/* 
-- nom: glass.css - caixa glass - contenidor translúcid amb blur --
-- framework: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Contenidor que s'ajusta al contingut i aplica fons translúcid + blur. Intensitat de blur triable per modificador. --
-- dependència: init.css, th-core.css --
*/

/* =============================================
   :ROOT
   ============================================= */
:root {
	/* PROPERTIES */

	/* Structure */
	--glass-pad: var(--sp-xl);

	/* Visual */
	--glass-blur: var(--blur-m);
	--glass-rd: var(--rd-md);
}

/* =============================================
   CLASSE BASE
   ============================================= */
.glass {
	--glass-bg: var(--cl-glass-low);
	display: inline-flex;
	flex-direction: column;
	padding: var(--glass-pad);
	border-radius: var(--glass-rd);
	background-color: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
}

/* =============================================
   MODIFICADORS — TIPOLOGIA: blur
   ============================================= */

.glass--blur-s { --glass-blur: var(--blur-s); }
.glass--blur-m { --glass-blur: var(--blur-m); }
.glass--blur-l { --glass-blur: var(--blur-l); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: pad
   ============================================= */

.glass--pad-m { --glass-pad: var(--sp-xl); }
.glass--pad-l { --glass-pad: var(--sp-2xl); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: tone
   ============================================= */

.glass--tone-light { --glass-bg: var(--trp-light-low); }
.glass--tone-dark  { --glass-bg: var(--trp-dark-low); }