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

.button {

    display: inline-flex;
    justify-content: center;
    align-items: center;

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

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

    font-family: "Inter";
    font-size: var(--button-size);
    font-weight: 600;

    cursor: pointer;

    user-select: none;

}

.button2 {

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding:
        var(--button-padding-y2)
        var(--button-padding-x2);

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

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--button-weight);

    cursor: pointer;

    user-select: none;

}

.button3 {

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding:
        var(--button-padding-y3)
        var(--button-padding-x3);

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

    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--button-weight);

    cursor: pointer;

    user-select: none;

}

.button4 {

    display: inline-flex;
    align-items: center;

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

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

    font-family: var(--font-body);
    font-size: var(--button-size);
    font-weight: var(--button-weight);

    cursor: pointer;

    user-select: none;

}

.button,
.button2,
.button3,
.button4 {

    transition:
        transform .1s ease,
        box-shadow .1s ease;

}

.button:active,
.button2:active,
.button3:active,
.button4:active {

    transform:
        translateY(3px)
        scale(.975);

}

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

.button-primary {
    background: var(--button-background);
    color: var(--button-dark-text);
}

.button-primary:disabled {
    background: var(--component-3);
    color: var(--text-50);

    cursor: not-allowed;
}

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

.button-secondary {

    background: transparent;
    border: 1px solid var(--button-text);
    color: var(--button-text);

}

.button-secondary-border {
    background: transparent;

    border: 1px solid color-mix(
        in srgb,
        var(--button-text) 20%,
        transparent
    );

    color: var(--button-text);
}

.button-secondary-fill {

    text-align: center;

    background: var(--button-secondary-fill);
    color: var(--button-secondary-fill-text);

}

.button-secondary-white {

    background: transparent;
    border: 1px solid white;
    color: white;

}

.button-secondary-theme {

    background: transparent;
    border: 1px solid var(--text-reverse);
    color: var(--text-reverse);

}

.button-secondary-fill-black {

    text-align: center;

    background: black;
    color: white;

}

.button2-secondary-fill-black {

    text-align: center;

    background: black;
    color: white;

}

.button4-redirect {

    margin-top: 50px;

    user-select: none;

    text-align: center;

    background: var(--button-secondary-fill);
    color: var(--button-secondary-fill-text);

}

/* ==========================================
   PLAYER
========================================== */

.button2-player {

    background: transparent;
    border: 1px solid var(--border-button);
    color: var(--button-text);

}

/* ==========================================
   BACK TO HOME
========================================== */

.button2-b2home {

    background: transparent;
    border: 1px solid var(--border-button);
    color: var(--button-text);

}

/* ==========================================
   LOGIN
========================================== */

.button2-login {

    background: transparent;
    border: 1px solid var(--border-button);
    color: var(--button-text);

}

.button2-signup {

    background: var(--accent);
    color: var(--button-dark-text);

}

.auth-buttons {

    gap: 10px;

}

.mobile-auth-buttons {

    display: flex;
    flex-direction: column;

    gap: 10px;

}

.button3-signup {

    background: var(--accent);
    color: var(--button-dark-text);

}