/* =============================================================
   Abas
   Usadas quando um estado tem mais de um órgão. Sem JavaScript
   todos os painéis ficam visíveis e as abas são âncoras — é o
   abas.js que passa a mostrar um painel por vez.
   ============================================================= */

.abas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-1);
	/* O conteúdo do painel não encosta na barra: sem esta folga o grid
	   nasce colado nas abas. */
	margin-block-end: var(--e-6);
	border-block-end: 1px solid var(--c-borda);
}

.abas__aba {
	display: block;
	padding: var(--e-2) var(--e-4);
	border: 1px solid transparent;
	border-block-end: none;
	border-start-start-radius: var(--raio-sm);
	border-start-end-radius: var(--raio-sm);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-texto-medio);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transicao), color var(--transicao);
}

.abas__aba:hover {
	color: var(--c-acao);
}

/* A aba ativa encosta no conteúdo: a borda de baixo é apagada de
   propósito, para a aba e o painel lerem como uma peça só. */
.abas__aba[aria-selected="true"] {
	margin-block-end: -1px;
	padding-block-end: calc( var(--e-2) + 1px );
	background: var(--c-fundo);
	border-color: var(--c-borda);
	color: var(--c-acao);
}

/* Sem JavaScript não há aba selecionada; o realce fica no alvo da âncora. */
.abas__painel:target {
	scroll-margin-block-start: var(--e-6);
}

.abas__painel[hidden] {
	display: none;
}

/* Com um órgão só não existe barra de abas — nada a estilizar. */
.abas--unica .abas__lista {
	display: none;
}