/*
 * Social sign-in buttons (templates/social/social_buttons.html) on /b/login and /b/p/register.
 *
 * Deliberately NOT Bootstrap's .btn: these pages load site-2's site.css (`.btn` as inline-flex,
 * `a.btn > svg` forced to 24x24) and then Bootstrap 3 (`.btn` back to inline-block), and that mix put
 * the icon ~6px above the label in buttons of different widths. Served with a 12h public cache
 * (WebConfig): bump the ?v= on the <link> in both templates when this file changes.
 */
.social_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.social_login_btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-family: Rubik, Open-Sans, sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* (0,2,1) !important beats the templates' own `a, a:visited, a:active, a:focus { color: #7F0052 !important }`. */
a.social_login_btn,
a.social_login_btn:visited,
a.social_login_btn:hover,
a.social_login_btn:active,
a.social_login_btn:focus {
    color: #1f1f1f !important;
    text-decoration: none;
}

.social_login_btn:hover {
    background: #f7f7f7;
    border-color: #b3b3b3;
}

.social_login_btn:focus-visible {
    outline: 2px solid #7F0052;
    outline-offset: 2px;
}

/* Bootstrap 3 rings every focused link (`a:focus { outline: 5px auto ... }`) — also after a mouse click. */
a.social_login_btn:focus:not(:focus-visible) {
    outline: none;
}

.social_login_btn svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
}