/* Botão (Atlassian Button). Variantes: primario, padrao, sutil, perigo, aviso, link.
   <c-botao variante="primario">Salvar</c-botao> · com href vira link com cara de botão. */

.ds-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-075);
  height: var(--altura-controle);
  padding: 0 var(--espaco-150);
  border: var(--borda-largura) solid transparent;
  border-radius: var(--raio-medio);
  font: var(--fonte-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.ds-botao:focus-visible { outline: var(--borda-largura-foco) solid var(--cor-foco); outline-offset: 2px; }

.ds-botao--primario { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.ds-botao--primario:hover { background: var(--cor-primaria-hover); }
.ds-botao--primario:active { background: var(--cor-primaria-pressionada); }

.ds-botao--secundario { background: var(--cor-secundaria); color: var(--cor-sobre-secundaria); }
.ds-botao--secundario:hover { background: var(--cor-secundaria-hover); }
.ds-botao--secundario:active { background: var(--cor-secundaria-pressionada); }

.ds-botao--padrao { background: var(--cor-superficie); color: var(--cor-texto-suave); border-color: var(--cor-borda); }
.ds-botao--padrao:hover { background: var(--cor-superficie-hover); }
.ds-botao--padrao:active { background: var(--cor-bloco-hover); }

.ds-botao--sutil { background: transparent; color: var(--cor-texto-suave); }
.ds-botao--sutil:hover { background: var(--cor-bloco); }
.ds-botao--sutil:active { background: var(--cor-bloco-hover); }

.ds-botao--perigo { background: var(--cor-perigo); color: var(--cor-texto-inverso); }
.ds-botao--perigo:hover { background: var(--cor-perigo-hover); }

.ds-botao--aviso { background: var(--cor-aviso); color: var(--cor-sobre-aviso); }
.ds-botao--aviso:hover { background: var(--cor-aviso-hover); }

.ds-botao--link { background: transparent; color: var(--cor-link); padding: 0 var(--espaco-050); }
.ds-botao--link:hover { text-decoration: underline; }

.ds-botao--compacto { height: var(--altura-controle-p); padding: 0 var(--espaco-100); }
.ds-botao--largo { width: 100%; }

.ds-botao:disabled, .ds-botao[aria-disabled="true"] {
  background: var(--cor-desabilitado-fundo);
  color: var(--cor-texto-desabilitado);
  border-color: transparent;
  cursor: not-allowed;
}