/*
	Styles pour selectcombo
*/

.selectcombo {

	position: relative;
	min-width: 10em;
	width: auto;
	background: var(--couleur_fond);
	color: var(--couleur_texte);

	.display {
		display: block;
		&:focus {
			outline: none;
		}
	}

	.display:not(.input)::after {
		content: "…";
		display: block;
		position: absolute;
		right: 1em;
		bottom: .2em;
	}

	ul.suggestions {
		display: none;
		background: inherit;
		padding: 0;
		box-shadow: 0 2px 5px rgba(0,0,0,.5);
		margin:0;
		position: absolute;
		top: 100%;
		left:0;
		width: 100%;
		max-height: 15em;
		overflow: hidden auto;
		z-index: 1; /* S'assurer de passer au-dessus des autres contrôles comme cases à cocher */
		li {
			margin: .1rem .5rem;
			list-style: none;
		}
		li.etat {
			font-style: italic;
			font-weight: bold;
			font-size: 80%;
		}
		li.prop {
			cursor: pointer;
		}
		li.prop:hover {
			text-decoration: underline;
		}
		li.active {
			color: var(--couleur_fond);
			background: var(--couleur_texte);
		}
	}

	.display.input + ul.suggestions {
		display: block;
	}

}