/* ==========================================================
   Bizgix Buttons
   File: assets/css/buttons.css
========================================================== */


/* ----------------------------------------------------------
   Base Button
---------------------------------------------------------- */

.bgx-btn{

    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:0 18px;

    border:1px solid transparent;

    border-radius:var(--bgx-radius);

    background:transparent;

    font-family:var(--bgx-font-family);

    font-size:14px;
    font-weight:600;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    transition:var(--bgx-transition);

}

.bgx-btn i{
    font-size:17px;
}


/* ----------------------------------------------------------
   Primary
---------------------------------------------------------- */

.bgx-btn-primary{

    background:var(--bgx-primary);

    border-color:var(--bgx-primary);

    color:#ffffff;

    box-shadow:
        0 2px 6px rgba(37,99,235,.16);

}

.bgx-btn-primary:hover{

    background:var(--bgx-primary-hover);

    border-color:var(--bgx-primary-hover);

    color:#ffffff;

    transform:translateY(-1px);

    box-shadow:
        0 5px 12px rgba(37,99,235,.18);

}


/* ----------------------------------------------------------
   Outline
---------------------------------------------------------- */

.bgx-btn-outline{

    background:#ffffff;

    border-color:var(--bgx-border);

    color:var(--bgx-heading);

}

.bgx-btn-outline:hover{

    background:var(--bgx-primary-soft);

    border-color:var(--bgx-primary-border);

    color:var(--bgx-primary);

}


/* ----------------------------------------------------------
   Secondary
---------------------------------------------------------- */

.bgx-btn-secondary{

    background:var(--bgx-navy);

    border-color:var(--bgx-navy);

    color:#ffffff;

}

.bgx-btn-secondary:hover{

    background:var(--bgx-navy-light);

    border-color:var(--bgx-navy-light);

    color:#ffffff;

}


/* ----------------------------------------------------------
   Soft Primary
---------------------------------------------------------- */

.bgx-btn-soft{

    background:var(--bgx-primary-soft);

    border-color:transparent;

    color:var(--bgx-primary);

}

.bgx-btn-soft:hover{

    background:#dbeafe;

    color:var(--bgx-primary-dark);

}


/* ----------------------------------------------------------
   Success
---------------------------------------------------------- */

.bgx-btn-success{

    background:var(--bgx-success);

    border-color:var(--bgx-success);

    color:#ffffff;

}

.bgx-btn-success:hover{

    filter:brightness(.95);

    color:#ffffff;

}


/* ----------------------------------------------------------
   Danger
---------------------------------------------------------- */

.bgx-btn-danger{

    background:var(--bgx-danger);

    border-color:var(--bgx-danger);

    color:#ffffff;

}

.bgx-btn-danger:hover{

    filter:brightness(.95);

    color:#ffffff;

}


/* ----------------------------------------------------------
   Ghost
---------------------------------------------------------- */

.bgx-btn-ghost{

    background:transparent;

    border-color:transparent;

    color:var(--bgx-text);

}

.bgx-btn-ghost:hover{

    background:var(--bgx-hover);

    color:var(--bgx-primary);

}


/* ----------------------------------------------------------
   Sizes
---------------------------------------------------------- */

.bgx-btn-sm{

    min-height:34px;

    padding:0 12px;

    border-radius:8px;

    font-size:12px;

}

.bgx-btn-sm i{
    font-size:15px;
}


.bgx-btn-lg{

    min-height:50px;

    padding:0 24px;

    font-size:15px;

}


/* ----------------------------------------------------------
   Icon Button
---------------------------------------------------------- */

.bgx-icon-btn{

    position:relative;

    width:40px;
    height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border:1px solid transparent;

    border-radius:10px;

    background:transparent;

    color:var(--bgx-light-text);

    cursor:pointer;

    transition:var(--bgx-transition);

}

.bgx-icon-btn i{

    font-size:20px;

}

.bgx-icon-btn:hover{

    background:var(--bgx-primary-soft);

    color:var(--bgx-primary);

}


/* ----------------------------------------------------------
   Close Button
---------------------------------------------------------- */

.bgx-btn-close{

    width:36px;
    height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:none;

    border-radius:9px;

    background:transparent;

    color:var(--bgx-light-text);

    cursor:pointer;

    transition:var(--bgx-transition);

}

.bgx-btn-close:hover{

    background:var(--bgx-danger-soft);

    color:var(--bgx-danger);

}


/* ----------------------------------------------------------
   Disabled
---------------------------------------------------------- */

.bgx-btn:disabled,
.bgx-btn.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;

}


/* ----------------------------------------------------------
   Full Width
---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   Button Group
---------------------------------------------------------- */

.bgx-btn-group{

    display:inline-flex;

    align-items:center;

    gap:8px;

}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media(max-width:576px){

    .bgx-btn{
        min-height:40px;
        padding:0 14px;
    }

}