/**
 * ==========================================
 * TelecomRoute Design System
 * Buttons
 * ==========================================
 */

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

.tr-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 30px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    cursor:pointer;

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

    white-space:nowrap;

}

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

.tr-btn-primary,
.tr-btn--primary{

    background:linear-gradient(
        135deg,
        var(--tr-primary-light),
        var(--tr-primary)
    );

    color:#fff;

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

}

.tr-btn-primary:hover,
.tr-btn--primary:hover{

    transform:translateY(-3px);

    color:#fff;

    box-shadow:
        0 20px 40px rgba(37,99,235,.35);

}

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

.tr-btn-secondary,
.tr-btn--secondary{

    background:#ffffff;

    color:var(--tr-primary);

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

}

.tr-btn-secondary:hover,
.tr-btn--secondary:hover{

    background:var(--tr-primary);

    color:#ffffff;

}

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

.tr-btn-outline{

    background:transparent;

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

    color:var(--tr-primary);

}

.tr-btn-outline:hover{

    background:var(--tr-primary);

    color:#fff;

}

/* ==========================================
   Dark
========================================== */

.tr-btn-dark{

    background:#0f172a;

    color:#fff;

}

.tr-btn-dark:hover{

    background:#020617;

    color:#fff;

}

/* ==========================================
   White
========================================== */

.tr-btn-white{

    background:#fff;

    color:var(--tr-primary);

}

.tr-btn-white:hover{

    background:#f8fafc;

}

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

.tr-btn-sm{

    padding:10px 20px;

    font-size:14px;

}

.tr-btn-lg{

    padding:18px 36px;

    font-size:17px;

}

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

.tr-btn-block{

    width:100%;

}

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

.tr-btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}

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

.tr-btn:focus-visible{

    outline:2px solid var(--tr-primary-light);

    outline-offset:3px;

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .tr-btn{

        padding:13px 24px;

    }

}