:root {
	--dimensioni-quadrato-autocomplete: 10px;
    --padding-right-autocomplete: 25px;
}


div:has(.elem-x-autocomplete-nr) > input[type="text"][nr-autocomplete] {
    padding-right: calc(var(--padding-right-autocomplete) + 7px);
}

.elem-container-elenco-autocomplete-nr {
	--padding-top-autocomplete: calc(var(--dimensioni-quadrato-autocomplete) - 2px);

	position: absolute;
	width: 100%;
	z-index: 1065;
	padding-top: var(--padding-top-autocomplete);
	background-color: transparent;

	&::after {
		content: "";
		position: absolute;
		top: calc(var(--padding-top-autocomplete) / 2);
		left: calc(50% - var(--dimensioni-quadrato-autocomplete) / 2);
		width: var(--dimensioni-quadrato-autocomplete);
		height: var(--dimensioni-quadrato-autocomplete);
		background-color: white;
		transform: rotate(45deg);
		border-top: 1px solid #e1e1e1;
		border-left: 1px solid #e1e1e1;
	}
}

.elem-elenco-autocomplete-nr {
	position: absolute;
	width: 100%;
	max-height: 300px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	padding: 7px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.elem-risultato-autocomplete-nr {
	--color-ris: black;
	--bg-color-ris: #fff;

	padding: 6px 13px;
	color: var(--color-ris);
	background-color: var(--bg-color-ris);
	font-size: 15px;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
    cursor: pointer;

	&[aria-selected="true"] {
		--bg-color-ris: #fafafa;
	}
}


.elem-x-autocomplete-nr {
    position: absolute;
    box-sizing: content-box;
    padding: 2px 6px;
    border-radius: 100%;
    top: 50%;
    right: var(--padding-right-autocomplete);
    transform: translateY(-50%);
    cursor: pointer;
    
    &:hover {
        background-color: #f1f1f1;
    }
}