/*
|--------------------------------------------------------------------------
| Aanya Organics Theme
|--------------------------------------------------------------------------
| Module : Design System
| File   : buttons.css
| Version: 1.0.0
|--------------------------------------------------------------------------
*/

/* ==========================================================
   Base Button
========================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-family:var(--font-heading);
    font-weight:var(--font-semibold);
    font-size:var(--font-size-base);
    line-height:1;

    text-decoration:none;

    border:none;
    outline:none;

    cursor:pointer;

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

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

    white-space:nowrap;

    user-select:none;
}

/* ==========================================================
   Sizes
========================================================== */

.btn-sm{

    padding:10px 18px;
    font-size:var(--font-size-sm);

}

.btn-md{

    padding:14px 28px;

}

.btn-lg{

    padding:18px 36px;
    font-size:var(--font-size-lg);

}

/* ==========================================================
   Primary
========================================================== */

.btn-primary{

    background:var(--color-primary);

    color:#ffffff;

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

}

.btn-primary:hover{

    transform:translateY(-2px);

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

}

.btn-primary:active{

    transform:translateY(0);

}

/* ==========================================================
   Secondary
========================================================== */

.btn-secondary{

    background:var(--color-brown);

    color:#ffffff;

}

.btn-secondary:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   Outline
========================================================== */

.btn-outline{

    background:transparent;

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

    color:var(--color-primary);

}

.btn-outline:hover{

    background:var(--color-primary);

    color:#ffffff;

}

/* ==========================================================
   Ghost
========================================================== */

.btn-ghost{

    background:transparent;

    color:var(--color-primary);

}

.btn-ghost:hover{

    background:rgba(116,177,47,.08);

}

/* ==========================================================
   Text Button
========================================================== */

.btn-text{

    background:none;

    color:var(--color-primary);

    padding:0;

    border-radius:0;

}

.btn-text:hover{

    text-decoration:underline;

}

/* ==========================================================
   Full Width
========================================================== */

.btn-block{

    width:100%;

}

/* ==========================================================
   Disabled
========================================================== */

.btn:disabled,
.btn.disabled{

    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;

}

/* ==========================================================
   Loading State
========================================================== */

.btn-loading{

    position:relative;

    pointer-events:none;

    color:transparent;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

    position:absolute;

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

    border-top-color:#ffffff;

    border-radius:50%;

    animation:aanya-spin .8s linear infinite;

}

/* ==========================================================
   Focus
========================================================== */

.btn:focus-visible{

    outline:3px solid rgba(116,177,47,.35);

    outline-offset:3px;

}

/* ==========================================================
   Button Group
========================================================== */

.btn-group{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

/* ==========================================================
   Icon
========================================================== */

.btn-icon{

    width:48px;

    height:48px;

    padding:0;

}

/* ==========================================================
   Animation
========================================================== */

@keyframes aanya-spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .btn-lg{

        width:100%;

    }

    .btn-group{

        flex-direction:column;

    }

}