/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/components/buttons.css
    Part 5.1 - Marketplace Buttons System
==========================================================*/


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:44px;

    padding:0 var(--space-5);

    border:none;

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

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

    font-size:var(--fs-base);

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

    cursor:pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

    text-decoration:none;

    white-space:nowrap;

}


.btn i{

    font-size:1rem;

}


/*==========================================================
    BUTTON HOVER EFFECT
==========================================================*/

.btn:hover{

    transform:translateY(-2px);

}


.btn:active{

    transform:translateY(0);

}


.btn:disabled,
.btn.disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}


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

.btn-primary{

    background:var(--color-primary);

    color:var(--white);

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

}


.btn-primary:hover{

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

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

}


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

.btn-secondary{

    background:var(--color-secondary);

    color:var(--white);

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

}


.btn-secondary:hover{

    background:var(--color-secondary-dark);

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

}


/*==========================================================
    OUTLINE BUTTON
==========================================================*/

.btn-outline{

    background:transparent;

    color:var(--color-primary);

    border:1px solid var(--color-primary);

}


.btn-outline:hover{

    background:var(--color-primary);

    color:var(--white);

}


/*==========================================================
    LIGHT BUTTON
==========================================================*/

.btn-light{

    background:var(--gray-100);

    color:var(--text-primary);

}


.btn-light:hover{

    background:var(--gray-200);

}


/*==========================================================
    DARK BUTTON
==========================================================*/

.btn-dark{

    background:var(--gray-900);

    color:var(--white);

}


.btn-dark:hover{

    background:var(--black);

}


/*==========================================================
    DANGER BUTTON
==========================================================*/

.btn-danger{

    background:var(--color-danger);

    color:var(--white);

}


.btn-danger:hover{

    filter:brightness(.9);

}


/*==========================================================
    SUCCESS BUTTON
==========================================================*/

.btn-success{

    background:var(--color-success);

    color:var(--white);

}


.btn-success:hover{

    filter:brightness(.9);

}


/*==========================================================
    ADD TO CART BUTTON
==========================================================*/

.btn-cart{

    width:100%;

    background:var(--color-primary);

    color:var(--white);

    height:46px;

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

}


.btn-cart:hover{

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

}


.btn-cart i{

    font-size:1.1rem;

}


/*==========================================================
    BUY NOW BUTTON
==========================================================*/

.btn-buy-now{

    width:100%;

    background:var(--color-secondary);

    color:var(--white);

}


.btn-buy-now:hover{

    background:var(--color-secondary-dark);

}


/*==========================================================
    ICON BUTTONS
==========================================================*/

.btn-icon{

    width:42px;

    height:42px;

    padding:0;

    border-radius:50%;

    background:var(--gray-100);

    color:var(--text-primary);

}


.btn-icon:hover{

    background:var(--color-primary);

    color:var(--white);

}


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

.btn-icon-square{

    width:44px;

    height:44px;

    padding:0;

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

    background:var(--gray-100);

}


.btn-icon-square:hover{

    background:var(--color-primary);

    color:var(--white);

}


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

.btn-sm{

    height:36px;

    padding-inline:var(--space-4);

    font-size:var(--fs-sm);

}


.btn-lg{

    height:54px;

    padding-inline:var(--space-7);

    font-size:1.05rem;

}


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

.btn-block{

    width:100%;

}


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

.btn-loading{

    position:relative;

    color:transparent!important;

    pointer-events:none;

}


.btn-loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:var(--white);

    animation:
        buttonSpin .7s linear infinite;

}


@keyframes buttonSpin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}


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

.btn-group{

    display:flex;

    align-items:center;

    gap:var(--space-3);

}


.btn-group .btn{

    flex:1;

}


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

.btn-floating{

    position:fixed;

    right:25px;

    bottom:25px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--color-primary);

    color:var(--white);

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

    z-index:var(--z-fixed);

}


.btn-floating:hover{

    transform:translateY(-5px);

}


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


@media(max-width:768px){


    .btn{

        height:42px;

        padding-inline:var(--space-4);

        font-size:.9rem;

    }


    .btn-lg{

        height:50px;

    }


}


@media(max-width:480px){


    .btn-group{

        flex-direction:column;

        width:100%;

    }


    .btn-group .btn{

        width:100%;

    }


}