/* ds-abas */
.ds-abas__lista {
  display: flex; gap: var(--ds-espaco-1);
  overflow-x: auto; scrollbar-width: thin;
  border-bottom: var(--ds-borda-largura) solid var(--ds-cor-borda);
}
.ds-abas__aba {
  flex: none; min-height: 44px;
  padding: var(--ds-espaco-3) var(--ds-espaco-4);
  border: 0; border-bottom: var(--ds-borda-largura-forte) solid transparent;
  margin-bottom: calc(var(--ds-borda-largura) * -1);
  background: transparent; color: var(--ds-cor-texto);
  font-family: var(--ds-fonte-texto); font-size: var(--ds-tamanho-texto); cursor: pointer;
  transition: color var(--ds-duracao) var(--ds-curva), border-color var(--ds-duracao) var(--ds-curva);
}
.ds-abas__aba:hover { color: var(--ds-cor-texto-destaque); }
.ds-abas__aba[aria-selected="true"] { color: var(--ds-cor-titulo); border-bottom-color: var(--ds-cor-destaque); }
.ds-abas__aba:focus-visible { outline-offset: -3px; }
.ds-abas__painel { padding-top: var(--ds-espaco-6); }
.ds-abas__painel > :last-child { margin-bottom: 0; }
.ds-abas__painel:focus-visible { outline-offset: 4px; }
/* Sem JS: some a lista e todos os painéis aparecem um embaixo do outro */
.ds-abas:not([data-ds-pronto]) .ds-abas__lista { display: none; }

/* Pílulas */
.ds-abas--pilulas .ds-abas__lista { border: 0; gap: var(--ds-espaco-2); }
.ds-abas--pilulas .ds-abas__aba { border: var(--ds-borda-largura) solid var(--ds-cor-borda); border-radius: var(--ds-raio-pilula); margin: 0; }
.ds-abas--pilulas .ds-abas__aba[aria-selected="true"] { background: var(--ds-cor-destaque); color: var(--ds-cor-sobre-destaque); border-color: var(--ds-cor-destaque); }

/* Vertical no computador */
@media (min-width: 900px) {
  .ds-abas--vertical[data-ds-pronto] { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: var(--ds-espaco-8); }
  .ds-abas--vertical .ds-abas__lista { flex-direction: column; border-bottom: 0; border-left: var(--ds-borda-largura) solid var(--ds-cor-borda); }
  .ds-abas--vertical .ds-abas__aba { text-align: left; border-bottom: 0; border-left: var(--ds-borda-largura-forte) solid transparent; margin: 0 0 0 calc(var(--ds-borda-largura) * -1); }
  .ds-abas--vertical .ds-abas__aba[aria-selected="true"] { border-left-color: var(--ds-cor-destaque); }
  .ds-abas--vertical .ds-abas__painel { padding-top: 0; }
}