/*
 * Botões com ícone + texto: quando o botão é flex/inline-flex o espaço entre o ícone e o texto
 * some, então o espaçamento vem do "gap" (em botões inline-block do Bootstrap o gap não tem efeito).
 */
.btn {
    gap: 8px;
}

.btn-theme,
.btn-theme:visited {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    transition:
        opacity .2s,
        box-shadow .2s,
        transform .1s;    
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme.focus {
    color: #fff;
    outline: 0;
    opacity: .92;
}

.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme,
.btn-theme:active:hover,
.btn-theme.active:hover,
.btn-theme:active:focus,
.btn-theme.active:focus,
.btn-theme:active.focus,
.btn-theme.active.focus {
    color: #fff;
    opacity: .85;
    transform: translateY(1px);
}

.btn-theme:active {
    background-image: none; /* remove o gradiente do Bootstrap 3 */
}

.btn-theme:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-acoes {
    min-width: 40px;
    height:40px;
    
    padding: 0px;
    margin: 0px;
    display:flex;
    gap: 6px;
    /* flex-direction: column; */
    align-items:center;
    justify-content:center;

    padding-left: 5px;
    padding-right: 5px;

    font-size: 12px;
    border:1px solid #d9d9d9;
    border-radius:6px;

    background:#fff;
    cursor:pointer;
    color: var(--cor-primaria);
}

/* .btn-acoes {
    color: var(--cor-primaria);
    background:
    color-mix(
        in srgb,
        var(--cor-primaria) 7%,
        white
    );
    min-width: 40px;
    height: 40px;
    font-size: 12px;
    padding: 0 3px 0 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} */

.btn-acoes:hover {
    color: var(--cor-primaria);
    background:
    color-mix(
        in srgb,
        var(--cor-primaria) 12%,
        white
    );
}

/* variações das ações da listagem, definidas pela procedure em acao.estilo */
.btn-acoes.btn-acoes-sucesso,
.btn-acoes.btn-acoes-sucesso:hover {
    color: #198754;
}
.btn-acoes.btn-acoes-sucesso:hover {
    background: #eaf7ef;
}
.btn-acoes.btn-acoes-perigo,
.btn-acoes.btn-acoes-perigo:hover {
    color: #dc3545;
}
.btn-acoes.btn-acoes-perigo:hover {
    background: #fdeeee;
}
.btn-acoes:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-theme i.fa {
    color: #fff !important;
}

.btn i.loader {
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 3px solid rgb(200, 200, 200);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    border-top-color: #fff !important; 
}

.btn-form-action{
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}