/* ==========================================================
   techOdec Buttons
   ========================================================== */

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:0.75rem;

    padding:var(--space-button-y) var(--space-button-x);

    border:none;

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

    cursor:pointer;

    text-decoration:none;

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

    font-size:1rem;

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

    line-height:1;

    white-space:nowrap;

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

}

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

.btn-primary{

    background:var(--color-primary);

    color:#fff;

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

}

.btn-primary:hover{

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

    transform:translateY(-2px);

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

}

.btn-primary:active{

    transform:translateY(0);

}

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

.btn-secondary{

    background:var(--color-surface);

    color:var(--color-text);

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

}

.btn-secondary:hover{

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

    color:var(--color-primary);

}

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

.btn-ghost{

    background:transparent;

    color:var(--color-text);

}

.btn-ghost:hover{

    background:rgba(0,0,0,.04);

}

/* ----------------------------------------------------------
   Text Button
---------------------------------------------------------- */

.btn-text{

    padding:0;

    border-radius:0;

    background:none;

    color:var(--color-primary);

}

.btn-text:hover{

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

}

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

.btn-sm{

    padding:.7rem 1.25rem;

    font-size:.9rem;

}

.btn-lg{

    padding:1.2rem 2.5rem;

    font-size:1.05rem;

}

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

.btn-block{

    width:100%;

}

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

.btn:disabled,
.btn.disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}