/**
 * Lettore vocale dell'articolo.
 *
 * Colori e misure vengono da tokens.css del child theme, caricato su tutte le
 * pagine: qui non ci sono valori letterali. I selettori doppi servono a battere
 * gli stili predefiniti di button e select di Hello Elementor.
 */

/*
 * Riserva il posto del lettore finché non arriva il JS, così il testo non salta
 * durante il caricamento. L'altezza è quella del lettore con il suo margine.
 */
.elementor-widget-theme-post-content::before {
	content: "";
	display: block;
	height: calc(var(--iny-testata-tocco) + 2 * (var(--iny-sp-2) + var(--iny-bordo)) + var(--iny-sp-5));
}

.elementor-widget-theme-post-content.iny-lettore-pronto::before {
	display: none;
}

.iny-lettore {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--iny-sp-2);
	margin-block-end: var(--iny-sp-5);
	padding-block: var(--iny-sp-2);
	border-block: var(--iny-bordo) solid var(--iny-c-bordo);
	font-family: var(--iny-font-testo);
	font-size: var(--iny-fs-sm);
	line-height: var(--iny-lh-media);
	color: var(--iny-c-testo-tenue);
}

.iny-lettore .iny-lettore__comando {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--iny-testata-tocco);
	height: var(--iny-testata-tocco);
	padding: 0;
	border: var(--iny-bordo) solid var(--iny-c-bordo-forte);
	border-radius: var(--iny-raggio);
	background: var(--iny-c-fondo);
	color: var(--iny-c-testo-tenue);
	cursor: pointer;
	transition: background-color var(--iny-transizione), color var(--iny-transizione);
}

.iny-lettore .iny-lettore__comando[hidden] {
	display: none;
}

.iny-lettore .iny-lettore__comando:hover,
.iny-lettore .iny-lettore__comando:focus {
	background: var(--iny-c-fondo-tenue);
	color: var(--iny-c-testo);
}

.iny-lettore .iny-lettore__comando--principale,
.iny-lettore .iny-lettore__comando--principale:focus {
	border-color: var(--iny-c-badge-fondo);
	background: var(--iny-c-badge-fondo);
	color: var(--iny-c-badge-testo);
}

.iny-lettore .iny-lettore__comando--principale:hover {
	border-color: var(--iny-accento-scuro);
	background: var(--iny-accento-scuro);
	color: var(--iny-c-badge-testo);
}

.iny-lettore .iny-lettore__comando:focus-visible,
.iny-lettore .iny-lettore__scelta:focus-visible {
	outline: var(--iny-focus-spessore) solid var(--iny-c-focus);
	outline-offset: var(--iny-focus-stacco);
}

.iny-lettore__comando svg {
	width: var(--iny-testata-icona);
	height: var(--iny-testata-icona);
	fill: currentColor;
}

.iny-lettore__stato {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--iny-fw-medio);
	color: var(--iny-c-testo);
}

.iny-lettore .iny-lettore__scelta {
	flex: none;
	width: auto;
	max-width: 100%;
	height: var(--iny-testata-tocco);
	padding-block: 0;
	padding-inline: var(--iny-sp-2);
	border: var(--iny-bordo) solid var(--iny-c-bordo-forte);
	border-radius: var(--iny-raggio);
	background: var(--iny-c-fondo);
	font-family: inherit;
	font-size: inherit;
	color: var(--iny-c-testo-tenue);
}

.iny-lettore__barra {
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(var(--iny-bordo) * -1);
	height: var(--iny-filetto);
	background: var(--iny-c-filetto);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--iny-transizione);
}

/* L'ombra allarga il fondo senza spostare il testo. */
.iny-lettore-corrente {
	background: var(--iny-c-fondo-tenue);
	box-shadow: 0 0 0 var(--iny-sp-1) var(--iny-c-fondo-tenue);
}