/**
 * Ricerca prodotti.
 * Elemento hi-ggu-product-search — vedi includes/shortcodes/class-hi-ggu-shortcode-product-search.php
 *
 * La classe .hi-product-search la produce lo shortcode [HI_product_search]: non
 * va applicata a mano. Il markup su cui lavora è:
 *
 *   div.hi-product-search
 *     form.hi-product-search__form
 *       input.hi-product-search__input[type=search]
 *       button.hi-product-search__submit           <- l'icona, dentro il campo
 *     div.hi-product-search__results                  (la Product List del tema)
 *     p.hi-product-search__message                    (al posto della griglia)
 *
 * L'ASPETTO VIENE DAL TEMA. Il campo non ha regole proprie di bordo, colore o
 * carattere, e resta quello di tutti i campi del sito (variabili --inputs-*).
 * Qui si decide solo la disposizione: campo a tutta larghezza, icona a destra
 * dentro il campo, griglia sotto. Il titolo della pagina è un elemento a parte.
 *
 * SPECIFICITÀ. Il foglio del tema dichiara `button[type=submit] { border: 2px
 * solid !important }`: per togliere il bordo al pulsante dell'icona serve a sua
 * volta un !important, l'unico del file. Tutto il resto passa per la specificità.
 *
 * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole.
 */

.hi-product-search {

	/* Allineamento dei messaggi al posto della griglia */
	--hi-ps-message-align: center;

	/* Spazio fra il campo e i risultati */
	--hi-ps-results-gap: 3rem;

	/* Icona: dimensione e colore. Di default quello del testo del campo. */
	--hi-ps-icon-size: 1.2rem;
	--hi-ps-icon-color: var(--inputs-text-color, currentColor);
	--hi-ps-icon-color-hover: var(--color-content-primary, #ff6b00);

	/* Larghezza del pulsante dell'icona, che è anche il rientro del testo a destra */
	--hi-ps-button-width: var(--inputs-height, 2.8rem);
}

/* --------------------------------------------------------------------------
 * Campo
 * ------------------------------------------------------------------------ */

.hi-product-search .hi-product-search__form {
	position: relative;
	margin: 0;
}

.hi-product-search .hi-product-search__input {
	display: block;
	width: 100%;
	margin: 0;
	padding-inline-end: var(--hi-ps-button-width);
}

/* La crocetta nativa dei campi search finirebbe sotto l'icona. */
.hi-product-search .hi-product-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.hi-product-search .hi-product-search__form .hi-product-search__submit {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hi-ps-button-width);
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0 !important;
	box-shadow: none;
	color: var(--hi-ps-icon-color);
	font-size: var(--hi-ps-icon-size);
	line-height: 1;
	cursor: pointer;
}

.hi-product-search .hi-product-search__form .hi-product-search__submit:hover,
.hi-product-search .hi-product-search__form .hi-product-search__submit:focus-visible {
	color: var(--hi-ps-icon-color-hover);
}

/* --------------------------------------------------------------------------
 * Risultati
 * ------------------------------------------------------------------------ */

.hi-product-search .hi-product-search__results,
.hi-product-search .hi-product-search__message {
	margin: var(--hi-ps-results-gap) 0 0;
}

.hi-product-search .hi-product-search__message {
	text-align: var(--hi-ps-message-align);
}