/* ==========================================
   CNA V2

   File:
   buttons.css

   Description:
   Buttons System

   Author:
   CNA

========================================== */

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:14px 28px;

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

    font-weight:600;

    font-size:.95rem;

    cursor:pointer;

    transition:all var(--transition-fast);

    border:1px solid transparent;

    position:relative;

    overflow:hidden;

}

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

.btn-primary{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );

    color:#fff;

    border:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

.btn-primary:hover{

    transform:translateY(-3px);

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

    filter:brightness(1.05);

}

.btn-primary:active{

    transform:translateY(-1px);

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:left .6s ease;

}

.btn-primary:hover::before{

    left:130%;

}

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

.btn-secondary{

    background:rgba(255,255,255,.05);

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

    color:var(--text-primary);

    backdrop-filter:blur(12px);

}

.btn-secondary:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.08);

}

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

.btn-outline{

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

    color:var(--color-primary);

    background:transparent;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:white;

}

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

.btn-sm{

    padding:10px 20px;

    font-size:.85rem;

}

.btn-lg{

    padding:18px 36px;

    font-size:1rem;

}

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

.btn:disabled{

    opacity:.5;

    pointer-events:none;

}