/**
 * O select desenhado do site.
 *
 * Fechado tem a medida do campo do Figma: 56 de altura, fundo #F7F9FC, borda
 * de 1px e raio 5. Aberto e um cartao branco por cima, com a opcao escolhida
 * marcada. As medidas saem em variaveis para um campo que viva noutro fundo
 * poder trocar a cor sem reescrever tudo.
 */

.els-sel {
	--els-sel-alt: 56px;
	--els-sel-fundo: #f7f9fc;
	--els-sel-borda: #e4e7ec;
	--els-sel-tinta: #101828;
	--els-sel-realce: #286191;

	position: relative;
	display: block;
	width: 100%;
}

/* enquanto o JavaScript nao corre fica o campo do navegador, que funciona */
.els-sel__nativo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ fechado */

.els-sel .els-sel__botao {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--els-sel-alt);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--els-sel-borda);
	border-radius: 5px;
	background-color: var(--els-sel-fundo);
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--els-sel-tinta);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.els-sel .els-sel__botao:hover { border-color: #b5d5f0; }

.els-sel .els-sel__botao:focus-visible {
	outline: 2px solid #b5d5f0;
	outline-offset: 1px;
	border-color: var(--els-sel-realce);
}

.els-sel.is-aberto .els-sel__botao {
	border-color: var(--els-sel-realce);
	background-color: #ffffff;
}

.els-sel__valor {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.els-sel__seta {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 1.5px solid #475467;
	border-bottom: 1.5px solid #475467;
	rotate: 45deg;
	transition: rotate .2s ease, margin .2s ease;
}
.els-sel.is-aberto .els-sel__seta { rotate: 225deg; margin-top: 3px; }

/* ------------------------------------------------------------- aberto */

.els-sel__lista {
	position: absolute;
	overscroll-behavior: contain;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 292px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--els-sel-borda);
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
}
.els-sel__lista[hidden] { display: none; }

.els-sel__opcao {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 6px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--els-sel-tinta);
	cursor: pointer;
	transition: background-color .14s ease;
}
.els-sel__opcao + .els-sel__opcao { margin-top: 2px; }
.els-sel__opcao:hover { background-color: #f7f9fc; }

.els-sel__opcao.is-escolhida {
	background-color: #eaf2fb;
	color: var(--els-sel-realce);
	font-weight: 600;
}

/* o visto da opcao escolhida, desenhado para nao depender de imagem nenhuma */
.els-sel__opcao::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 11px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
	opacity: 0;
	transition: opacity .14s ease;
}
.els-sel__opcao.is-escolhida::after { opacity: 1; }

@media (max-width: 767px) {
	.els-sel { --els-sel-alt: 54px; }
	.els-sel .els-sel__botao { font-size: 15px; }
	.els-sel__opcao { font-size: 15px; }
}

/* a lista abre para cima quando nao ha espaco por baixo */
.els-sel.is-cima .els-sel__lista {
	top: auto;
	bottom: calc(100% + 6px);
}