/* ============================================================
   BOTÕES SISTEMA OCB + Bootstrap 5
   ============================================================ */

/* Reset e base Bootstrap */
.btn, .sppb-btn {
    display: inline-block;
    font: normal normal var(--weight-medium) 14px/16px var(--font-inter);
    padding: 12px 38px;
    border: 1px solid transparent;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.btn:focus, .sppb-btn:focus {
    box-shadow: none;
    outline: 0;
}

/* -------- DEFAULT -------- */
.btn-outline-primary, .sppb-btn-default {
    color: var(--ocb-azul-marinho) !important;
    background-color: var(--ocb-transparent);
    border-color: var(--ocb-azul-marinho);
}

.btn-outline-primary:hover,
.sppb-btn-default:hover,
.sppb-btn-default.focus,
.sppb-btn-default:focus,
.sppb-btn-default.active,
.sppb-btn-default:active {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-marinho);
    border-color: var(--ocb-azul-marinho);
}

/* -------- PRIMARY -------- */
.btn-primary, .sppb-btn-primary {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-marinho);
    border-color: var(--ocb-azul-marinho);
}

.btn-primary:hover,
.sppb-btn-primary:hover,
.sppb-btn-primary.focus,
.sppb-btn-primary:focus,
.sppb-btn-primary.active,
.sppb-btn-primary:active {
    color: var(--ocb-azul-marinho) !important;
    background-color: var(--ocb-transparent);
    border-color: var(--ocb-azul-marinho);
}

/* -------- SECONDARY -------- */
.btn-outline-info, .sppb-btn-secondary {
    color: var(--ocb-azul-ceu) !important;
    background-color: var(--ocb-transparent);
    border-color: var(--ocb-azul-ceu);
}

.btn-outline-info:hover,
.sppb-btn-secondary:hover,
.sppb-btn-secondary.focus,
.sppb-btn-secondary:focus,
.sppb-btn-secondary.active,
.sppb-btn-secondary:active {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-ceu);
    border-color: var(--ocb-azul-ceu);
}

/* -------- SUCCESS -------- */
.btn-outline-success, .sppb-btn-success {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-transparent);
    border-color: var(--ocb-branco);
}

.btn-outline-success:hover,
.sppb-btn-success:hover,
.sppb-btn-success.focus,
.sppb-btn-success:focus,
.sppb-btn-success.active,
.sppb-btn-success:active {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-ceu);
    border-color: var(--ocb-azul-ceu);
}

/* -------- INFO -------- */
.btn-info, .sppb-btn-info {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-ceu);
    border-color: var(--ocb-azul-ceu);
}

.btn-info:hover,
.sppb-btn-info:hover,
.sppb-btn-info.focus,
.sppb-btn-info:focus,
.sppb-btn-info.active,
.sppb-btn-info:active {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-marinho);
    border-color: var(--ocb-azul-marinho);
}

/* -------- DARK -------- */
.btn-dark, .sppb-btn-dark {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-marinho);
    border-color: var(--ocb-azul-marinho);
}

.btn-dark:hover,
.sppb-btn-dark:hover,
.sppb-btn-dark.focus,
.sppb-btn-dark:focus,
.sppb-btn-dark.active,
.sppb-btn-dark:active {
    color: var(--ocb-branco) !important;
    background-color: var(--ocb-azul-ceu);
    border-color: var(--ocb-azul-ceu);
}

/* -------- TAMANHOS -------- */
.btn-sm, .sppb-btn-sm {
    padding: 10px 30px;
    font-size: 14px;
    line-height: 17px;
    border-radius: 20px;
}

.btn-lg, .sppb-btn-lg {
    padding: 12px 48px;
    font-size: 14px;
    line-height: 17px;
    border-radius: 20px
}

.sppb-btn-round {
    border-radius: 20px
}