/* =========================================
   VRChatCustom 2.0
   Button Styles
========================================= */



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


button {


    position:   

    relative;



    overflow:

    hidden;



    transition:

    var(--transition-normal);



}







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


.primary-btn {


    display:

    inline-flex;



    align-items:

    center;



    justify-content:

    center;



    gap:

    10px;



    padding:

    15px 32px;



    border-radius:

    var(--radius-full);



    background:

    var(--button-primary);



    color:

    #00110d;



    font-size:

    15px;



    font-weight:

    800;



    letter-spacing:

    .3px;



    box-shadow:

    0 0 25px
    rgba(
        0,
        245,
        212,
        .25
    );



}







.primary-btn:hover {


    transform:

    translateY(-5px);



    box-shadow:

    0 0 45px
    rgba(
        0,
        245,
        212,
        .5
    );



}







.primary-btn::before {


    content:"";


    position:

    absolute;



    top:

    0;



    left:

    -100%;



    width:

    100%;



    height:

    100%;



    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );



    transition:

    .5s;



}







.primary-btn:hover::before {


    left:

    100%;



}








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


.secondary-btn {


    display:

    inline-flex;



    align-items:

    center;



    justify-content:

    center;



    padding:

    15px 32px;



    border-radius:

    var(--radius-full);



    background:

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



    border:

    1px solid var(--border);



    color:

    var(--text-primary);



    font-size:

    15px;



    font-weight:

    700;



    backdrop-filter:

    blur(15px);



}







.secondary-btn:hover {


    border-color:

    var(--primary);



    color:

    var(--primary);



    transform:

    translateY(-5px);



    box-shadow:

    0 0 25px
    rgba(
        0,
        245,
        212,
        .15
    );



}







/* ===============================
   INSTALL BUTTON
========================================= */


.install-btn {


    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



    gap:

    8px;



    background:

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



    color:

    #00110d;



    font-weight:

    800;



}







.install-btn:hover {


    transform:

    translateY(-4px);



    box-shadow:

    0 0 35px
    rgba(
        0,
        245,
        212,
        .45
    );



}







/* ===============================
   DETAILS BUTTON
========================================= */


.details-btn {


    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



    background:

    rgba(
        255,
        255,
        255,
        .06
    );



    color:

    var(--text-primary);



    border:

    1px solid var(--border);



}







.details-btn:hover {


    color:

    var(--primary);



    border-color:

    var(--primary);



}







/* ===============================
   DISCORD BUTTON
========================================= */


.discord-btn {


    padding:

    13px 28px;



    border-radius:

    var(--radius-full);



    background:

    linear-gradient(
        135deg,
        #5865F2,
        #7289DA
    );



    color:

    white;



    font-weight:

    800;



    box-shadow:

    0 0 25px
    rgba(
        88,
        101,
        242,
        .35
    );



}







.discord-btn:hover {


    transform:

    translateY(-4px);



    box-shadow:

    0 0 45px
    rgba(
        88,
        101,
        242,
        .6
    );



}







/* ===============================
   SMALL BUTTON
========================================= */


.small-btn {


    padding:

    10px 18px;



    border-radius:

    var(--radius-full);



    font-size:

    13px;



    font-weight:

    700;



}








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


.btn-icon {


    width:

    20px;



    height:

    20px;



    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



}








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


.loading-btn {


    pointer-events:

    none;



    opacity:

    .7;



}







.loading-btn::after {


    content:"";


    width:

    16px;



    height:

    16px;



    border:

    2px solid transparent;



    border-top-color:

    currentColor;



    border-radius:

    50%;



    animation:

    spin .8s linear infinite;



}







@keyframes spin {


    from {


        transform:

        rotate(0deg);



    }


    to {


        transform:

        rotate(360deg);



    }

}

.community-buttons .discord-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 32px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #5865F2,
        #7289da
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    font-size:16px;

    transition:0.3s;

    box-shadow:
    0 10px 25px rgba(88,101,242,0.35);

}


.community-buttons .discord-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(88,101,242,0.55);

}