/* "Continue with Google / Apple" — colours follow the providers' brand rules:
   both buttons share Google's white (light) or dark (dark theme) variant.
   Shape, border width and padding stay the theme's (Sketchy), so they look
   like every other button. Two classes each, because `a:link { color:
   inherit }` (utilities.css) outranks a single class and would paint the
   Google label white. */
.sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* The buttons are links, and `a:link` (utilities.css) draws a dotted 1px
   underline in place of the bottom border. */
.btn.sso-btn {
    border-bottom: var(--bs-btn-border-width) solid;
}

.sso-btn__logo {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    /* Sits on the text's x-height instead of its baseline. */
    vertical-align: -3px;
}

.sso-btn.sso-btn--google,
.sso-btn.sso-btn--google:hover,
.sso-btn.sso-btn--google:focus,
.sso-btn.sso-btn--apple,
.sso-btn.sso-btn--apple:hover,
.sso-btn.sso-btn--apple:focus {
    background: #fff;
    color: #1f1f1f;
    border-color: #747775;
}

.sso-btn.sso-btn--google:hover,
.sso-btn.sso-btn--apple:hover {
    background: #f2f2f2;
}

/* Google's own dark variant; Apple's button wears the same, so the two
   read as one pair (Apple allows black or white with the logo in the
   label colour). */
[data-bs-theme=dark] .sso-btn.sso-btn--google,
[data-bs-theme=dark] .sso-btn.sso-btn--google:hover,
[data-bs-theme=dark] .sso-btn.sso-btn--google:focus,
[data-bs-theme=dark] .sso-btn.sso-btn--apple,
[data-bs-theme=dark] .sso-btn.sso-btn--apple:hover,
[data-bs-theme=dark] .sso-btn.sso-btn--apple:focus {
    background: #131314;
    color: #e3e3e3;
    border-color: #8e918f;
}

[data-bs-theme=dark] .sso-btn.sso-btn--google:hover,
[data-bs-theme=dark] .sso-btn.sso-btn--apple:hover {
    background: #1f1f20;
}

.sso-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.sso-divider::before,
.sso-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}