/*
====================================================
Converigo
Button Components
Version : 2.0.0

UX Polish Sprint 4.5
- Primary button
- Secondary button
- Convert button
- Disabled state
- Hover animation
====================================================
*/


.btn{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    min-width:140px;


    height:48px;


    padding:0 24px;


    border-radius:14px;


    border:none;


    cursor:pointer;


    font-size:16px;


    font-weight:600;


    transition:all .25s ease;


    font-family:inherit;


}





/*
==============================
PRIMARY
==============================
*/


.btn-primary{


    background:#2563EB;


    color:#ffffff;


}





.btn-primary:hover{


    background:#1D4ED8;


    transform:translateY(-2px);


}





/*
==============================
SECONDARY
==============================
*/


.btn-secondary{


    background:#ffffff;


    color:#111827;


    border:1px solid #E5E7EB;


}





.btn-secondary:hover{


    border-color:#2563EB;


    color:#2563EB;


    transform:translateY(-2px);


}





/*
==============================
CONVERT BUTTON
==============================
*/


.btn-success{


    background:#2563EB;


    color:white;


    margin-top:32px;


}





.btn-success:hover:not(:disabled){


    background:#1D4ED8;


    transform:translateY(-3px);


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


}





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


.btn:disabled,
.btn-success:disabled{


    background:#E5E7EB;


    color:#9CA3AF;


    cursor:not-allowed;


    transform:none;


    box-shadow:none;


}





/*
==============================
LOADING STATE
==============================
*/


.btn.loading{


    pointer-events:none;


    opacity:.8;


}





.btn.loading::after{


    content:"";


    width:16px;


    height:16px;


    margin-left:10px;


    border:2px solid white;


    border-top-color:transparent;


    border-radius:50%;


    animation:spin .8s linear infinite;


}





@keyframes spin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}