/* @override 
	http://127.0.0.1/Sites/www.homeinitaly.com/_engine/_libs/ELF/css/ELF_CSS_Variables.css
	http://127.0.0.1/SitiPicov/ELF_Devel/Sites/www.homeinitaly.com/_engine/_libs/ELF/css/ELF_CSS_Variables.css
	http://127.0.0.1/Sites/_engine/_libs/ELF/css/ELF_CSS_Variables.css
*/

/* Da sovrascrivere nel template del particolare sito */

:root {
	/* Valori primari */
	
	--elfcss-accent-color: #0f6ecd;
	
	--elfcss-black-color: #000;
	--elfcss-grey-0-color: var(--elfcss-black-color,#000); 
	--elfcss-grey-5-color: #0d0d0d;
	--elfcss-grey-10-color: #1a1a1a;
	--elfcss-grey-15-color: #262626;
	--elfcss-grey-dark-color: #2b2b2b; /* 17% */
	--elfcss-grey-20-color: #333;
	--elfcss-grey-25-color: #404040;
	--elfcss-grey-30-color: #4d4d4d;
	--elfcss-grey-35-color: #595959;
	--elfcss-grey-40-color: #666;
	--elfcss-grey-45-color: #737373;
	--elfcss-grey-50-color: #808080;
	--elfcss-grey-color: var(--elf-text-color-grey-50,#808080); 
	--elfcss-grey-55-color: #8c8c8c;
	--elfcss-grey-60-color: #999;
	--elfcss-grey-65-color: #a6a6a6;
	--elfcss-grey-70-color: #b3b3b3;
	--elfcss-grey-75-color: #bfbfbf;
	--elfcss-grey-80-color: #ccc;
	--elfcss-grey-light-color: #d3d3d3; /* 83% */
	--elfcss-grey-85-color: #d9d9d9;
	--elfcss-grey-90-color: #e5e5e5;
	--elfcss-grey-95-color: #f2f2f2;
	--elfcss-grey-100-color: #fff;
	--elfcss-white-color: var(--elf-color-grey-100,#fff);
	
	--elfcss-normal-color1: #666; /* normal al posto di default -> OK */
	--elfcss-normal-color: var(--elfcss-accent-color);
	--elfcss-primary-color1: #0f6ecd;
	--elfcss-primary-color: var(--elfcss-accent-color);
	--elfcss-secondary-color: #333;
	--elfcss-info-color: #17a2b8;
	--elfcss-success-color: #32d296;
	--elfcss-warning-color: #faa05a;
	--elfcss-danger-color: #f0506e;
	--elfcss-error-color: #cc0033;
	

	--elf-css-body-max-width: 1600px;
	--elf-css-body-min-side-margin: 2em;	


	/* Sul desktop non la gestisco */
  	--elfcss-max-safe-visible-height: none;

}

/*
 	Max sized phone OTT 2025 = Phone 16/17 Pro Max 440x956 -> ancora OK con 480 e 960
	Max sized tablet OTT 2025 = iPad Pro (7th gen 13") 1032x1376 -> sconfina dai 960 landscape ma le ultime versioni iOS richiedono pure di default il sito desktop
*/


/* Non coincide con l'orientamemto del device ma con le proporzioni della viewport */
@media (orientation: landscape) {
	:root {
		--elfcss-is-portrait: 0;
		--elfcss-is-landscape: 1;
	}
	.elf-tablet {
		/* Landscape*/
		/* 790 iPad Pro 11" (M4) iOS 18.6 */		
		/* 768 iPad (6gen) iOS 18.6 */		
		/* 728 iPad mini (5gen) iOS 18.6 */		
		/* 700 iPad mini (A17Pro) iOS 18.6 */		
		--elfcss-max-safe-visible-height: 700px	
	}
	.elf-phone {
		/* Landscape*/
		/* 392 iPhone16 con iOS 16.8 */
		/* 390 iPhone12 con iOS 16.8 */
		/* 360 iPhone12 mini ed iPhoneSE 2 gen con iOS 16.8 e 26 */
		--elfcss-max-safe-visible-height: 360px	
	}
}
@media (orientation: portrait) {
	:root {
		--elfcss-is-portrait: 1;
		--elfcss-is-landscape: 0;
	}
	.elf-tablet {
		/* Portrait */
		/* 1164 iPad Pro 11" (M4) iOS 18.6 */		
		/* 1134 iPad (A16) iOS 18.6 */		
		/* 1134 iPad (10gen) iOS 18.6 */		
		/* 1088 iPad mini (6gen) iOS 18.6 */
		/* 1088 iPad mini (A17 Pro) */
		/* 1040 iPad (6gen) iOS 18.6 */
		/* 980 iPad mini (5gen) iOS 18.6 */
		--elfcss-max-safe-visible-height: 980px	
	}
	.elf-phone {
		/* Portrait */
		/* 660 ok su iPhone12 mini con iOS 16.8 Safari che ha le bande opache in alto e basso */
		/* 620 ok su iPhoneSE 2 gen (ultimo con touch id e bande -> non full screen) */
		--elfcss-max-safe-visible-height: 620px;
	}
}


/* Stili specifici epr gli elementi */
/* I colori derivati sono calcolabili con colormix (2023 in poi) o relative css4 color (2004 in poi) -> eventualmente creo un fallback */

/* Criterio di design per gestire le varianti colore (override locale)
 - evito il moltiplicarsi delle variabili per ciascuno stile (--elfcss-primary-text-color, --elfcss-primary-background-color, --elfcss-primary-border-color, ...)
 - evito la relativa ridefinizione completa CSS delle classi esplicite (.elf-button.elf-primary, .elf-button-primary)
 - posso gestire le variabili a livello di elementi --elfcss-button-  --elfcss-ul .... oppure renderle specifiche all'eleemento usando il nome della classe ()elf-button.elf-primary...) 
*/
/* Qui definisco solo le variabili e non il resto deglis tili in modo da rendere il css parametrico */
.elf-button {	
	--elfcss-base-color: var(--elfcss-normal-color);
	
	--elfcss-button-text-color: var(--elfcss-base-color);
	--elfcss-button-background-color: var(--elfcss-white-color);
	--elfcss-button-border-color: var(--elfcss-base-color);

	--elfcss-button-active-text-color: color-mix(in srgb, var(--elfcss-base-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-background-color: color-mix(in srgb, var(--elfcss-white-color) 95%, var(--elfcss-base-color));
	--elfcss-button-active-border-color: var(--elfcss-base-color);

	--elfcss-button-disabled-text-color: var(--elfcss-grey-70-color);
	--elfcss-button-disabled-background-color: var(--elfcss-grey-90-color); /* Monocromatico */
	--elfcss-button-disabled-background-color: color-mix(in srgb, var(--elfcss-base-color) 20%, var(--elfcss-white-color)); /* In Gradazione */
	--elfcss-button-disabled-border-color: var(--elfcss-grey-80-color);

	/* Altri parametri: imposto il valore oppure leggo variabili globali :root */
	--elfcss-button-line-height: 38px; 
	--elfcss-button-padding: 0px 16px;
	--elfcss-button-border-width: 1px;
	--elfcss-button-border-radius: 0px;
}

.elf-button.elf-primary {
	--elfcss-base-color: var(--elfcss-primary-color);
	
	--elfcss-button-text-color: var(--elfcss-white-color);
	--elfcss-button-background-color: var(--elfcss-base-color);
	--elfcss-button-border-color: var(--elfcss-base-color);

	--elfcss-button-active-text-color: color-mix(in srgb, var(--elfcss-white-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-background-color: color-mix(in srgb, var(--elfcss-base-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-border-color: var(--elfcss-base-color);

	/* consolidato sulla classe base
	--elfcss-button-disabled-text-color: var(--elfcss-grey-70-color);
	--elfcss-button-disabled-background-color1: var(--elfcss-grey-90-color);
	--elfcss-button-disabled-border-color: var(--elfcss-grey-80-color);
	*/
}

/* Dal secondary in poi lo schema di calcolo dei colori derivati può essere in generale lo stesso (se in un tema non fosse così basta crearlo specifico) */
.elf-button.elf-secondary,
.elf-button.elf-info,
.elf-button.elf-success,
.elf-button.elf-warning,
.elf-button.elf-danger,
.elf-button.elf-error
{
	--elfcss-button-text-color: var(--elfcss-white-color);
	--elfcss-button-background-color: var(--elfcss-base-color);
	--elfcss-button-border-color: color-mix(in srgb, var(--elfcss-base-color) 90%, var(--elfcss-black-color));
	
	--elfcss-button-active-text-color: color-mix(in srgb, var(--elfcss-white-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-background-color: color-mix(in srgb, var(--elfcss-base-color) 80%, var(--elfcss-black-color));
	--elfcss-button-active-border-color: color-mix(in srgb, var(--elfcss-base-color) 90%, var(--elfcss-black-color));
	
	/* consolidato sulla classe base
	--elfcss-button-disabled-text-color: var(--elfcss-grey-70-color);
	--elfcss-button-disabled-background-color1: var(--elfcss-grey-90-color);
	--elfcss-button-disabled-border-color: var(--elfcss-grey-80-color);
	*/
}
.elf-button.elf-secondary {
	--elfcss-base-color: var(--elfcss-secondary-color);
}
.elf-button.elf-info {
	--elfcss-base-color: var(--elfcss-info-color);
}
.elf-button.elf-success {
	--elfcss-base-color: var(--elfcss-success-color);
}
.elf-button.elf-warning {
	--elfcss-base-color: var(--elfcss-warning-color);
}
.elf-button.elf-danger {
	--elfcss-base-color: var(--elfcss-danger-color);
}
.elf-button.elf-error {
	--elfcss-base-color: var(--elfcss-error-color);
}

/* oppure elf-button-alt*/
.elf-button.elf-alt {	
	--elfcss-base-color: var(--elfcss-normal-color);
	
	--elfcss-button-text-color: var(--elfcss-base-color);
	--elfcss-button-background-color: var(--elfcss-white-color);
	--elfcss-button-border-color: var(--elfcss-base-color);

	--elfcss-button-active-text-color: color-mix(in srgb, var(--elfcss-base-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-background-color: color-mix(in srgb, var(--elfcss-white-color) 95%, var(--elfcss-base-color));
	--elfcss-button-active-border-color: var(--elfcss-base-color);

	--elfcss-button-disabled-text-color: var(--elfcss-grey-70-color);
	--elfcss-button-disabled-background-color: var(--elfcss-grey-90-color); /* Monocromatico */
	--elfcss-button-disabled-background-color: color-mix(in srgb, var(--elfcss-base-color) 20%, var(--elfcss-white-color)); /* In Gradazione */
	--elfcss-button-disabled-border-color: var(--elfcss-grey-80-color);

	/* Altri parametri */
	--elfcss-button-padding: 4px 16px;
	--elfcss-button-border-width: 1px;
	--elfcss-button-border-radius: 99px;
}
.elf-button.elf-alt.elf-primary {
	--elfcss-base-color: red;

}
.elf-button.elf-alt.elf-secondary {
	--elfcss-base-color: green;
}	
.elf-button.elf-alt.elf-info {
	--elfcss-base-color: yellow;
}	


/* bottone per gli elementi di interazione (bottoni mappa, oaginazione ecc) */
.elf-button.elf-widget {
	--elfcss-base-color: var(--elfcss-normal-color);
	
	--elfcss-button-text-color: var(--elfcss-base-color);
	--elfcss-button-background-color: var(--elfcss-white-color);
	--elfcss-button-border-color: var(--elfcss-base-color);

	--elfcss-button-active-text-color: color-mix(in srgb, var(--elfcss-base-color) 85%, var(--elfcss-black-color));
	--elfcss-button-active-background-color: color-mix(in srgb, var(--elfcss-white-color) 95%, var(--elfcss-base-color));
	--elfcss-button-active-border-color: var(--elfcss-base-color);

	--elfcss-button-disabled-text-color: var(--elfcss-grey-70-color);
	--elfcss-button-disabled-background-color: var(--elfcss-grey-90-color); /* Monocromatico */
	--elfcss-button-disabled-background-color: color-mix(in srgb, var(--elfcss-base-color) 20%, var(--elfcss-white-color)); /* In Gradazione */
	--elfcss-button-disabled-border-color: var(--elfcss-grey-80-color);

	/* Altri parametri */
	--elfcss-button-padding: 4px 16px;
	--elfcss-button-border-width: 1px;
	--elfcss-button-border-radius: 99px;	
}
.elf-button.elf-widget.elf-primary {
	--elfcss-base-color: red;

}
.elf-button.elf-widget.elf-secondary {
	--elfcss-base-color: green;
}	
.elf-button.elf-widget.elf-info {
	--elfcss-base-color: yellow;
}	



.elf-button.elf-large {
	/* Override variabili */
	--elfcss-button-padding: 8px 42px;
	--elfcss-button-border-radius: 0px; /* FC 6px */
}