/*
|--------------------------------------------------------------------------
| Botões
|--------------------------------------------------------------------------
|
| Hierarquia (regra do sistema):
|   primary    uma por área de tela: a ação que conclui a tarefa
|   secondary  ações de apoio (Exportar, Filtros)
|   outline    alternativas no mesmo nível (Cancelar, Voltar)
|   ghost      ações terciárias e dentro de tabelas/menus
|   danger     destrutivas (Excluir, Bloquear) — sempre com confirmação
|
| Tamanhos: sm (tabelas, toolbars) · md (padrão) · lg (telas de toque)
|
| Estados: :hover · :active · :focus-visible · [disabled] ·
|          [aria-disabled="true"] (desabilitado com motivo no tooltip) ·
|          .is-loading (aria-busy) · [aria-pressed="true"] (alternância)
|
*/

.ds-btn {
    --ds-btn-bg: var(--ds-color-surface);
    --ds-btn-bg-hover: var(--ds-color-surface-hover);
    --ds-btn-bg-active: var(--ds-color-secondary);
    --ds-btn-fg: var(--ds-color-text);
    --ds-btn-border: var(--ds-color-border-strong);

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-1-5);

    min-height: var(--ds-control-height);
    padding: 0 var(--ds-space-3);

    border: var(--ds-border-width) solid var(--ds-btn-border);
    border-radius: var(--ds-radius-md);

    background: var(--ds-btn-bg);

    color: var(--ds-btn-fg);

    font: 500 14px/20px var(--ds-font);
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--ds-duration-fast) var(--ds-ease-standard),
        border-color var(--ds-duration-fast) var(--ds-ease-standard),
        color var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-btn:hover {
    background: var(--ds-btn-bg-hover);

    color: var(--ds-btn-fg);
    text-decoration: none;
}

.ds-btn:active {
    background: var(--ds-btn-bg-active);
}

.ds-btn:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-offset);
}

.ds-btn .ph {
    font-size: 18px;
    vertical-align: 0;
}

/* Variantes */

.ds-btn--primary {
    --ds-btn-bg: var(--ds-color-primary);
    --ds-btn-bg-hover: var(--ds-color-primary-hover);
    --ds-btn-bg-active: var(--ds-color-primary-active);
    --ds-btn-fg: var(--ds-color-on-primary);
    --ds-btn-border: transparent;
}

.ds-btn--secondary {
    --ds-btn-bg: var(--ds-color-secondary);
    --ds-btn-bg-hover: var(--ds-color-secondary-hover);
    --ds-btn-bg-active: var(--ds-color-secondary-active);
    --ds-btn-fg: var(--ds-color-on-secondary);
    --ds-btn-border: transparent;
}

.ds-btn--outline {
    /* padrão do .ds-btn */
}

.ds-btn--ghost {
    --ds-btn-bg: transparent;
    --ds-btn-bg-hover: var(--ds-color-secondary);
    --ds-btn-bg-active: var(--ds-color-secondary-hover);
    --ds-btn-fg: var(--ds-color-text-secondary);
    --ds-btn-border: transparent;
}

.ds-btn--ghost:hover {
    --ds-btn-fg: var(--ds-color-text);
}

.ds-btn--danger {
    --ds-btn-bg: var(--ds-color-danger-solid);
    --ds-btn-bg-hover: var(--ds-color-danger-solid-hover);
    --ds-btn-bg-active: var(--ds-color-danger-solid-active);
    --ds-btn-fg: var(--ds-color-text-inverse);
    --ds-btn-border: transparent;
}

/* Destrutivo discreto (ex.: "Excluir" ao lado de "Salvar") */
.ds-btn--danger-outline {
    --ds-btn-bg-hover: var(--ds-color-danger-bg);
    --ds-btn-bg-active: var(--ds-color-danger-bg);
    --ds-btn-fg: var(--ds-color-danger-fg);
    --ds-btn-border: var(--ds-color-danger-border);
}

/* Tamanhos */

.ds-btn--sm {
    gap: var(--ds-space-1);

    min-height: var(--ds-control-height-sm);
    padding: 0 10px;

    font-size: 13px;
    line-height: 18px;
}

.ds-btn--sm .ph {
    font-size: 16px;
}

.ds-btn--lg {
    min-height: var(--ds-control-height-lg);
    padding: 0 var(--ds-space-4);
}

.ds-btn--block {
    width: 100%;
}

/* Estados */

.ds-btn[aria-pressed="true"] {
    --ds-btn-bg: var(--ds-color-surface-selected);
    --ds-btn-fg: var(--ds-color-primary-active);
    --ds-btn-border: var(--ds-color-primary-subtle-border);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
    --ds-btn-bg: var(--ds-color-surface-sunken);
    --ds-btn-bg-hover: var(--ds-color-surface-sunken);
    --ds-btn-bg-active: var(--ds-color-surface-sunken);
    --ds-btn-fg: var(--ds-color-text-disabled);
    --ds-btn-border: var(--ds-color-border);

    cursor: not-allowed;
}

.ds-btn--ghost:disabled,
.ds-btn--ghost[aria-disabled="true"] {
    --ds-btn-bg: transparent;
    --ds-btn-border: transparent;
}

/*
 * Carregando: mantém a largura (sem pulo de layout), esconde o texto
 * e mostra o indicador no lugar.
 */
.ds-btn.is-loading {
    color: transparent;

    pointer-events: none;
}

.ds-btn.is-loading > * {
    visibility: hidden;
}

.ds-btn.is-loading::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 16px;
    height: 16px;
    margin: auto;

    border: 2px solid var(--ds-btn-fg);
    border-right-color: transparent;
    border-radius: 50%;

    animation: ds-girar .7s linear infinite;
}

/*
|--------------------------------------------------------------------------
| Botão de ícone
|--------------------------------------------------------------------------
|
| Sempre com aria-label (e title) dizendo a ação: "Editar ocorrência 102".
|
*/

.ds-icon-btn {
    width: var(--ds-control-height);
    padding: 0;
}

.ds-icon-btn.ds-btn--sm {
    width: var(--ds-control-height-sm);
    padding: 0;
}

/*
|--------------------------------------------------------------------------
| Botão com cara de link (ação secundária dentro de um texto)
|--------------------------------------------------------------------------
| "Ver mais", "Ver nomes", "Tentar de novo": sem caixa, cor primária.
*/

.ds-btn-link {
    display: inline;

    padding: 0;

    border: 0;

    background: none;

    color: var(--ds-color-primary);

    font: inherit;
    font-weight: var(--ds-font-weight-medium);

    cursor: pointer;
}

.ds-btn-link:hover {
    color: var(--ds-color-primary-hover);

    text-decoration: underline;
}

.ds-btn-link:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-offset);

    border-radius: 2px;
}

/* Ação destrutiva discreta (excluir um item da lista): fica neutro até o hover */
.ds-icon-btn--danger:hover,
.ds-icon-btn--danger:focus-visible {
    background: var(--ds-color-danger-bg);

    color: var(--ds-color-danger-fg);
}

/*
|--------------------------------------------------------------------------
| Grupo de botões
|--------------------------------------------------------------------------
*/

.ds-btn-group {
    display: inline-flex;
}

.ds-btn-group > .ds-btn {
    border-radius: 0;
}

.ds-btn-group > .ds-btn + .ds-btn {
    margin-left: calc(var(--ds-border-width) * -1);
}

.ds-btn-group > .ds-btn:first-child {
    border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
}

.ds-btn-group > .ds-btn:last-child {
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}

.ds-btn-group > .ds-btn:focus-visible,
.ds-btn-group > .ds-btn[aria-pressed="true"] {
    z-index: 1;
}

/* Botão com menu (dropdown): o caret faz parte do botão */
.ds-btn__caret {
    margin-right: -2px;

    font-size: 14px !important;
}