/* Abas (a pílula): as páginas de uma seção, embaixo do título, e as escolhas dentro de um cartão. Links com
   aria-current="page" ou botões com aria-selected="true"; no celular, a fileira rola de lado. */
.abas {
  display: flex;
  gap: var(--espaco-1);
  padding: 4px;
  overflow-x: auto;
  background: var(--cor-superficie-suave);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
}

.abas__aba {
  flex: none;
  padding: 6px 14px;
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: 560;
  color: var(--cor-texto-secundario);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--raio-pilula);
  cursor: pointer;
  transition: background-color var(--duracao-2), color var(--duracao-2), box-shadow var(--duracao-2);
}

.abas__aba:hover {
  color: var(--cor-texto);
}

.abas__aba[aria-selected="true"],
.abas__aba[aria-current="page"] {
  color: var(--cor-texto);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1), 0 0 0 1px var(--cor-borda);
}

.abas__aba:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}