/**
 * Icone file per elenchi (editor classico + sito).
 *
 * Convenzione: .elenco-file--TIPO e .voce-file--TIPO
 * compaiono da sole nel menu Formati.
 *
 * @group icona   = tipo file (pdf, word...).
 * @group misura  = dimensione (si applica SOPRA l'icona).
 * @group formato = formattazione (si applica SOPRA l'icona).
 *
 * Preset un clic (stessa icona + misura): classe elenco-file--pdf-grande
 *
 * Per aggiungere un tipo (es. powerpoint):
 * 1. Metti l'icona in assets/images/ (es. icona-file-powerpoint.svg).
 * 2. Copia un blocco qui sotto, cambia --powerpoint e l'url.
 * 3. Opzionale: @label e @group nel commento.
 * 4. Ricarica l'editor classico.
 */

ul.elenco-file {
	--opi-file-icon-w: 22px;
	--opi-file-icon-h: 26px;
	--opi-file-gap: 0.6rem;
	--opi-file-text: inherit;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ul.elenco-file > li,
li.voce-file {
	display: flex;
	align-items: center;
	gap: var(--opi-file-gap, 0.6rem);
	box-sizing: border-box;
	position: relative;
	list-style: none;
	margin: 0 0 0.75em;
	padding: 0.15em 0;
	min-height: calc(var(--opi-file-icon-h, 26px) + 10px);
	font-size: var(--opi-file-text, inherit);
	line-height: 1.35;
}

ul.elenco-file > li a,
li.voce-file a {
	font-size: inherit;
}

ul.elenco-file > li > p,
li.voce-file > p {
	margin: 0;
}

ul.elenco-file > li::before,
li.voce-file::before {
	content: "";
	display: block;
	flex: 0 0 var(--opi-file-icon-w, 22px);
	width: var(--opi-file-icon-w, 22px);
	height: var(--opi-file-icon-h, 26px);
	position: static;
	align-self: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* @label Elenco: PDF */
.elenco-file--pdf > li:not(.voce-file)::before,
/* @label Voce: PDF */
.voce-file--pdf::before {
	background-image: url("../images/icona-file-pdf.svg");
}

/* @label Elenco: Word */
.elenco-file--word > li:not(.voce-file)::before,
/* @label Voce: Word */
.voce-file--word::before {
	background-image: url("../images/icona-file-word.svg");
}

/* @label Elenco: Excel */
.elenco-file--excel > li:not(.voce-file)::before,
/* @label Voce: Excel */
.voce-file--excel::before {
	background-image: url("../images/icona-file-excel.svg");
}

/* @label Elenco: Testo TXT */
.elenco-file--txt > li:not(.voce-file)::before,
/* @label Voce: Testo TXT */
.voce-file--txt::before {
	background-image: url("../images/icona-file-txt.svg");
}

/* @label Elenco: ZIP */
.elenco-file--zip > li:not(.voce-file)::before,
/* @label Voce: ZIP */
.voce-file--zip::before {
	background-image: url("../images/icona-file-zip.svg");
}

/* @label Elenco: File */
.elenco-file--file > li:not(.voce-file)::before,
/* @label Voce: File */
.voce-file--file::before {
	background-image: url("../images/icona-file.svg");
}

/* --- Misura (qualsiasi icona): le variabili si ereditano, la riga cresce con l'icona. --- */

/* @group misura @label Elenco: Compatto */
.elenco-file--compatto,
/* @group misura @label Voce: Compatto */
.voce-file--compatto {
	--opi-file-icon-w: 16px;
	--opi-file-icon-h: 20px;
	--opi-file-gap: 0.4rem;
	--opi-file-text: 0.85rem;
}

.elenco-file--compatto > li,
.voce-file--compatto {
	margin-bottom: 0.45em;
}

/* @group misura @label Elenco: Grande */
.elenco-file--grande,
/* @group misura @label Voce: Grande */
.voce-file--grande {
	--opi-file-icon-w: 32px;
	--opi-file-icon-h: 38px;
	--opi-file-gap: 0.75rem;
	--opi-file-text: 1.25rem;
}

.elenco-file--grande > li,
.voce-file--grande {
	margin-bottom: 1em;
}

/* @group misura @label Elenco: Extra large */
.elenco-file--xl,
/* @group misura @label Voce: Extra large */
.voce-file--xl {
	--opi-file-icon-w: 44px;
	--opi-file-icon-h: 52px;
	--opi-file-gap: 0.9rem;
	--opi-file-text: 1.45rem;
}

.elenco-file--xl > li,
.voce-file--xl {
	margin-bottom: 1.25em;
}

/* --- Formato (qualsiasi icona) --- */

/* @group formato @label Elenco: Spaziato */
.elenco-file--spaziato > li,
/* @group formato @label Voce: Spaziato */
.voce-file--spaziato {
	margin-bottom: 1.4em;
}

/* @group formato @label Elenco: Grassetto */
.elenco-file--grassetto > li,
/* @group formato @label Voce: Grassetto */
.voce-file--grassetto {
	font-weight: 700;
}

/* @group formato @label Elenco: Scheda */
.elenco-file--scheda > li,
/* @group formato @label Voce: Scheda */
.voce-file--scheda {
	background: #f4f7fb;
	border: 1px solid #d5e0ee;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.65em;
}

/* Preset un clic: stessa icona PDF, misure diverse. */
/* @label Elenco: PDF compatto */
.elenco-file--pdf-compatto,
/* @label Voce: PDF compatto */
.voce-file--pdf-compatto {
	--opi-file-icon-w: 16px;
	--opi-file-icon-h: 20px;
	--opi-file-gap: 0.4rem;
	--opi-file-text: 0.85rem;
}

.elenco-file--pdf-compatto > li:not(.voce-file)::before,
.voce-file--pdf-compatto::before {
	background-image: url("../images/icona-file-pdf.svg");
}

.elenco-file--pdf-compatto > li,
.voce-file--pdf-compatto {
	margin-bottom: 0.45em;
}

/* @label Elenco: PDF grande */
.elenco-file--pdf-grande,
/* @label Voce: PDF grande */
.voce-file--pdf-grande {
	--opi-file-icon-w: 32px;
	--opi-file-icon-h: 38px;
	--opi-file-gap: 0.75rem;
	--opi-file-text: 1.25rem;
}

.elenco-file--pdf-grande > li:not(.voce-file)::before,
.voce-file--pdf-grande::before {
	background-image: url("../images/icona-file-pdf.svg");
}

.elenco-file--pdf-grande > li,
.voce-file--pdf-grande {
	margin-bottom: 1em;
}