/*=========================================================
    HP-EXAM-PRO
    BUTTONS.CSS
    --------------------------------------------------------
    Global Button Styles
==========================================================*/

/*=========================================
    BASE BUTTON
=========================================*/

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.75rem 1.5rem;

    font-size:var(--font-md);
    font-weight:var(--fw-semibold);

    border:2px solid transparent;
    border-radius:var(--radius);

    cursor:pointer;

    transition:var(--transition);

    text-decoration:none;

    user-select:none;

    white-space:nowrap;
}

.btn:focus-visible{
    outline:3px solid rgba(13,110,253,.25);
    outline-offset:3px;
}

/*=========================================
    BUTTON COLORS
=========================================*/

.btn-primary{
    background:var(--primary);
    color:var(--white);
    border-color:var(--primary);
}

.btn-primary:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    color:var(--white);
    transform:translateY(-2px);
}

.btn-secondary{
    background:var(--secondary);
    color:var(--white);
    border-color:var(--secondary);
}

.btn-secondary:hover{
    opacity:.92;
    color:var(--white);
}

.btn-success{
    background:var(--success);
    color:var(--white);
    border-color:var(--success);
}

.btn-success:hover{
    filter:brightness(.95);
    color:var(--white);
}

.btn-danger{
    background:var(--danger);
    color:var(--white);
    border-color:var(--danger);
}

.btn-danger:hover{
    filter:brightness(.95);
    color:var(--white);
}

.btn-warning{
    background:var(--warning);
    color:var(--gray-900);
    border-color:var(--warning);
}

.btn-warning:hover{
    filter:brightness(.95);
    color:var(--gray-900);
}

.btn-info{
    background:var(--info);
    color:var(--gray-900);
    border-color:var(--info);
}

.btn-info:hover{
    filter:brightness(.95);
}

/*=========================================
    OUTLINE BUTTONS
=========================================*/

.btn-outline-primary{
    background:transparent;
    color:var(--primary);
    border-color:var(--primary);
}

.btn-outline-primary:hover{
    background:var(--primary);
    color:var(--white);
}

.btn-outline-secondary{
    background:transparent;
    color:var(--secondary);
    border-color:var(--secondary);
}

.btn-outline-secondary:hover{
    background:var(--secondary);
    color:var(--white);
}

.btn-outline-light{
    background:transparent;
    color:var(--white);
    border-color:var(--white);
}

.btn-outline-light:hover{
    background:var(--white);
    color:var(--primary);
}

.btn-light{
    background:var(--white);
    color:var(--primary);
    border-color:var(--white);
}

.btn-light:hover{
    background:var(--gray-100);
}

/*=========================================
    BUTTON SIZES
=========================================*/

.btn-sm{
    padding:.45rem .9rem;
    font-size:var(--font-sm);
}

.btn-lg{
    padding:1rem 2rem;
    font-size:var(--font-lg);
}

.btn-xl{
    padding:1.2rem 2.5rem;
    font-size:1.2rem;
}

/*=========================================
    BUTTON WIDTH
=========================================*/

.btn-block{
    display:flex;
    width:100%;
}

/*=========================================
    ICON BUTTON
=========================================*/

.btn-icon{
    width:48px;
    height:48px;
    padding:0;
    border-radius:50%;
}

.btn-icon-sm{
    width:36px;
    height:36px;
}

.btn-icon-lg{
    width:60px;
    height:60px;
}

/*=========================================
    SOFT BUTTONS
=========================================*/

.btn-soft-primary{
    background:rgba(13,110,253,.12);
    color:var(--primary);
}

.btn-soft-primary:hover{
    background:var(--primary);
    color:var(--white);
}

.btn-soft-success{
    background:rgba(25,135,84,.12);
    color:var(--success);
}

.btn-soft-success:hover{
    background:var(--success);
    color:var(--white);
}

.btn-soft-danger{
    background:rgba(220,53,69,.12);
    color:var(--danger);
}

.btn-soft-danger:hover{
    background:var(--danger);
    color:var(--white);
}

/*=========================================
    FLOATING BUTTON
=========================================*/

.btn-floating{
    position:fixed;
    right:30px;
    bottom:30px;

    width:60px;
    height:60px;

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

    border-radius:50%;

    box-shadow:var(--shadow-lg);

    z-index:999;
}

/*=========================================
    DISABLED
=========================================*/

.btn:disabled,
.btn.disabled{
    opacity:.6;
    cursor:not-allowed;
    pointer-events:none;
}

/*=========================================
    LOADING BUTTON
=========================================*/

.btn-loading{
    position:relative;
    pointer-events:none;
    opacity:.85;
}

.btn-loading::after{
    content:"";
    width:16px;
    height:16px;

    margin-left:.75rem;

    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;

    border-radius:50%;

    animation:btn-spin .8s linear infinite;
}

@keyframes btn-spin{

    to{
        transform:rotate(360deg);
    }

}

/*=========================================
    BUTTON GROUP
=========================================*/

.btn-group{
    display:inline-flex;
    gap:.5rem;
    flex-wrap:wrap;
}

/*=========================================
    HOVER EFFECTS
=========================================*/

.btn:hover{
    box-shadow:var(--shadow);
}

.btn:active{
    transform:scale(.98);
}

/*=========================================
    RESPONSIVE
=========================================*/

@media (max-width:768px){

    .btn-lg{
        padding:.9rem 1.6rem;
    }

    .btn-xl{
        padding:1rem 2rem;
        font-size:1rem;
    }

    .btn-floating{
        width:52px;
        height:52px;
        right:20px;
        bottom:20px;
    }

}