/**
 * Tag — aspetto. BLOCCO NUOVO, non un porting.
 *
 * La pillola che sta sopra un titolo: bordo stondato, sfondo tenue, un pallino a sinistra e
 * due parole maiuscole. In elewidget non esiste niente del genere e sul sito oggi la si
 * ottiene con un testo Elementor vestito a mano, quindi non c'è nessun markup da rispettare:
 * la forma è quella del riferimento grafico che l'ha chiesta.
 *
 * ── LE VARIANTI SONO CLASSI, I RITOCCHI SONO REGOLE PER-ID ────────────────────────────
 *
 * Le sette varianti stanno QUI, come classi `.seTag--<nome>`: sono l'aspetto del sito, e
 * l'aspetto del sito si cambia in un posto solo. Se fossero stili scritti dentro il blocco,
 * ritoccare il verde vorrebbe dire riaprire ogni pagina che contiene un tag verde.
 *
 * I quattro colori personalizzati del pannello non stanno qui e non possono starci: sono di
 * quella singola pillola. GrapeJS li scrive come regola per-id (`#idxyz{…}`), che ha
 * precedenza su queste — un `#id` batte un `.se-gjs-page .seTag--verde` per specificità, non
 * per ordine di caricamento, quindi vale anche se questo foglio arrivasse dopo.
 *
 * ── IL PALLINO È UN ELEMENTO, NON UN ::before ─────────────────────────────────────────
 *
 * Verrebbe da farlo con uno pseudo-elemento: un nodo in meno, e la regola 1 dice di non
 * metterne di inutili. Non si può, perché il pallino ha un colore SUO che l'autore cambia
 * per la singola pillola, e uno pseudo-elemento non si stila per-id: servirebbe una
 * variabile CSS scritta sulla radice, cioè far passare quel colore per una strada diversa da
 * quella degli altri tre. Un nodo vero costa uno `<span>` e fa sì che tutti e quattro i
 * colori siano la stessa cosa: uno stile su un componente.
 *
 * ── ALIGN-SELF, CHE NON È UN VEZZO ───────────────────────────────────────────────────
 *
 * Un tag lasciato cadere nella pagina finisce in una Colonna, e la Colonna è `flex` in
 * `column` (regola zero): il suo `align-items` di serie è `stretch`, e senza `align-self` la
 * pillola si allargherebbe da bordo a bordo della colonna. `inline-flex` da solo non basta —
 * dentro un contenitore flex ogni figlio viene comunque trattato da elemento flex.
 *
 * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend sia nel canvas.
 */

.se-gjs-page .seTag {
	display: inline-flex;
	align-items: center;
	gap: .55rem;

	/* Vedi la nota qui sopra: dentro una Colonna sarebbe larga quanto la colonna. */

	max-width: 100%;

	box-sizing: border-box;
	padding: .5rem 1.15rem;

	/* ⚠ DUE PIXEL, e non uno. Il bordo è la cosa che si vede per prima di questa pillola —
	   è quello che la fa leggere come un contorno colorato e non come una macchia di colore
	   — e a 1px, su fondi tenui come questi, sparisce: il colore c'è, la variante cambia,
	   ma a occhio le sette pillole si distinguono solo per lo sfondo. Non è una questione di
	   gusto: a 1px il bordo della variante di fatto non esiste. */
	border: 2px solid transparent;
	border-radius: 999px;

	font-size: var(--text--small, 14px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	width: fit-content;
}

/* Il pallino non si stringe quando il testo è lungo: `flex: 0 0 auto` e le due misure in
   `em`, così segue il corpo del carattere della pillola invece di restare un numero fisso
   che stona appena qualcuno ingrandisce il testo. */
.se-gjs-page .seTag__pallino {
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	border-radius: 50%;

	/* Il ripiego, se una variante non dichiarasse il suo: il colore del testo. Meglio un
	   pallino coerente che un pallino invisibile. */
	background-color: currentColor;
}

.se-gjs-page .seTag__testo {
	min-width: 0;
}

/* ────────────────────────────────────────────────────────────────────────────────────── *
 * Le sette varianti.
 *
 * Sei sono pillole chiare — sfondo tenue, bordo saturo, testo scuro dello stesso colore — e
 * la settima è quella scura, che serve alla chiamata all'azione: sfondo pieno e testo
 * chiaro, così stacca dalle altre invece di essere un settimo colore fra i sei.
 *
 * Il blu è il #0f74c1 dei pulsanti del sito (css/se-builder-bottoni.css) e non un blu preso
 * dal riferimento grafico: sono a occhio lo stesso colore, e di blu su questo sito ce n'è
 * uno solo.
 * ────────────────────────────────────────────────────────────────────────────────────── */

.se-gjs-page .seTag--scuro {
	background-color: #06264d;
	border-color: #06264d;
	color: #2a90e6;
}

.se-gjs-page .seTag--scuro .seTag__pallino {
	background-color: #2a90e6;
}

.se-gjs-page .seTag--blu {
	background-color: #dceafc;
	border-color: #a5cbf3;
	color: #0f74c1;
}

.se-gjs-page .seTag--blu .seTag__pallino {
	background-color: #1a86e0;
}

.se-gjs-page .seTag--verde {
	background-color: #dbe8d4;
	border-color: #5c8b4b;
	color: #3d6b3a;
}

.se-gjs-page .seTag--verde .seTag__pallino {
	background-color: #6a9c52;
}

.se-gjs-page .seTag--rosa {
	background-color: #ffe2eb;
	border-color: #f2416f;
	color: #dd2f5f;
}

.se-gjs-page .seTag--rosa .seTag__pallino {
	background-color: #f2416f;
}

.se-gjs-page .seTag--arancio {
	background-color: #ffe7cb;
	border-color: #f0a04b;
	color: #d9822b;
}

.se-gjs-page .seTag--arancio .seTag__pallino {
	background-color: #f0902e;
}

.se-gjs-page .seTag--viola {
	background-color: #e4e0ea;
	border-color: #6f6280;
	color: #4c465a;
}

.se-gjs-page .seTag--viola .seTag__pallino {
	background-color: #6f6280;
}

.se-gjs-page .seTag--giallo {
	background-color: #fdf4c9;
	border-color: #f0cf5a;
	color: #c9a22a;
}

.se-gjs-page .seTag--giallo .seTag__pallino {
	background-color: #f2cf49;
}