/**
 * VP Social Login - button styles.
 *
 * @copyright   Copyright (C) 2024 - 2026 VPJoomla. All rights reserved.
 * @license     GNU GPL v2 or later; see LICENSE.txt
 */

.vp-social-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: .5rem;
    transition: filter .15s ease, background-color .15s ease, color .15s ease;
}

/* Pin the icon size so it can never be stretched by a global svg rule. */
.vp-social-login-button svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.vp-social-login-button:hover {
    filter: brightness(.96);
}

/* --- Module wrapper layout --- */
.vp-social-login {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vp-social-login--inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.vp-social-login__telegram {
    display: flex;
    justify-content: center;
}

/* --- Brand (default) --- */
.vp-social-login--brand .vpsl-google,
.vp-social-login-button.vpsl-google {
    background-color: #fff;
    color: #3c4043;
    border-color: #dadce0;
}

.vp-social-login--brand .vpsl-discord,
.vp-social-login-button.vpsl-discord {
    background-color: #5865f2;
    color: #fff;
}

.vp-social-login--brand .vpsl-github,
.vp-social-login-button.vpsl-github {
    background-color: #24292f;
    color: #fff;
}

.vp-social-login--brand .vpsl-telegram,
.vp-social-login-button.vpsl-telegram {
    background-color: #229ed9;
    color: #fff;
}

/* --- Outline variant --- */
.vp-social-login--outline .vp-social-login-button {
    background-color: transparent;
    color: inherit;
    border-color: currentColor;
}

.vp-social-login--outline .vpsl-google { color: #3c4043; }
.vp-social-login--outline .vpsl-discord { color: #5865f2; }
.vp-social-login--outline .vpsl-github { color: #24292f; }
.vp-social-login--outline .vpsl-telegram { color: #229ed9; }

/* --- Icon-only variant --- */
.vp-social-login--icon .vp-social-login-button {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
}

.vp-social-login--icon .vp-social-login-button .vp-social-login-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}